vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

OverlayBadge added docs

pull/5806/head
tugcekucukoglu 2024-05-22 11:10:07 +03:00
parent f6b154ae7e
commit e07ee4a5a1
8 changed files with 89 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/doc/codeeditor/templates.js
View File

@ -168,6 +168,7 @@ import MeterGroup from 'primevue/metergroup';
import MultiSelect from 'primevue/multiselect';
import OrderList from 'primevue/orderlist';
import OrganizationChart from 'primevue/organizationchart';
import OverlayBadge from 'primevue/overlaybadge';
import OverlayPanel from 'primevue/overlaypanel';
import Paginator from 'primevue/paginator';
import Panel from 'primevue/panel';
@ -291,6 +292,7 @@ app.component('MeterGroup', MeterGroup);
app.component('MultiSelect', MultiSelect);
app.component('OrderList', OrderList);
app.component('OrganizationChart', OrganizationChart);
app.component('OverlayBadge', OverlayBadge);
app.component('OverlayPanel', OverlayPanel);
app.component('Paginator', Paginator);
app.component('Panel', Panel);

16
doc/avatar/IconDoc.vue
View File

@ -20,7 +20,9 @@
<div class="flex-auto">
<h5>Badge</h5>
<Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar icon="pi pi-user" size="xlarge" />
</OverlayBadge>
</div>
</div>
</div>
@ -41,7 +43,9 @@ export default {
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
<Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar icon="pi pi-user" size="xlarge" />
</OverlayBadge>
`,
options: `
<template>
@ -63,7 +67,9 @@ export default {
<div class="flex-auto">
<h5>Badge</h5>
<Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar icon="pi pi-user" size="xlarge" />
</OverlayBadge>
</div>
</div>
</div>
@ -93,7 +99,9 @@ export default {
<div class="flex-auto">
<h5>Badge</h5>
<Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar icon="pi pi-user" size="xlarge" />
</OverlayBadge>
</div>
</div>
</div>

16
doc/avatar/ImageDoc.vue
View File

@ -13,7 +13,9 @@
<div class="flex-auto">
<h5>Badge</h5>
<Avatar v-badge.danger="4" class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
</OverlayBadge>
</div>
<div class="flex-auto">
@ -35,7 +37,9 @@ export default {
<Avatar image="/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
<Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
<Avatar v-badge.danger="4" class="p-overlay-badge" image="/images/organization/walter.jpg" size="xlarge" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
</OverlayBadge>
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
`,
@ -52,7 +56,9 @@ export default {
<div class="flex-auto">
<h5>Badge</h5>
<Avatar v-badge.danger="4" class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
</OverlayBadge>
</div>
<div class="flex-auto">
@ -80,7 +86,9 @@ export default {
<div class="flex-auto">
<h5>Badge</h5>
<Avatar v-badge.danger="4" class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
</OverlayBadge>
</div>
<div class="flex-auto">

16
doc/avatar/LabelDoc.vue
View File

@ -20,7 +20,9 @@
<div class="flex-auto">
<h5>Badge</h5>
<Avatar v-badge.danger="4" label="U" size="xlarge" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar label="U" size="xlarge" />
</OverlayBadge>
</div>
</div>
</div>
@ -41,7 +43,9 @@ export default {
<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
<Avatar v-badge.danger="4" label="U" size="xlarge" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar label="U" size="xlarge" />
</OverlayBadge>
`,
options: `
<template>
@ -62,7 +66,9 @@ export default {
<div class="flex-auto">
<h5>Badge</h5>
<Avatar v-badge.danger="4" label="U" size="xlarge" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar label="U" size="xlarge" />
</OverlayBadge>
</div>
</div>
</template>
@ -90,7 +96,9 @@ export default {
<div class="flex-auto">
<h5>Badge</h5>
<Avatar v-badge.danger="4" label="U" size="xlarge" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar label="U" size="xlarge" />
</OverlayBadge>
</div>
</div>
</template>

6
doc/badge/ImportDoc.vue
View File

@ -11,11 +11,7 @@ export default {
basic: `
// import as component
import Badge from 'primevue/badge';
// import as directive
import BadgeDirective from 'primevue/badgedirective';
app.directive('badge', BadgeDirective);
import OverlayBadge from 'primevue/overlaybadge'; // optional
`
}
};

48
doc/badge/PositionDoc.vue
View File

@ -3,15 +3,15 @@
<p>A Badge can be added to any element using the directive.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-center gap-6">
<span v-badge="2">
<OverlayBadge value="2">
<i class="pi pi-bell" style="font-size: 2rem" />
</span>
<span v-badge.danger="'5+'">
</OverlayBadge>
<OverlayBadge value="5+" severity="danger">
<i class="pi pi-calendar" style="font-size: 2rem" />
</span>
<span v-badge.danger>
</OverlayBadge>
<OverlayBadge severity="danger">
<i class="pi pi-envelope" style="font-size: 2rem" />
</span>
</OverlayBadge>
</div>
<DocSectionCode :code="code" />
</template>
@ -22,28 +22,28 @@ export default {
return {
code: {
basic: `
<span v-badge="2">
<OverlayBadge value="2">
<i class="pi pi-bell" style="font-size: 2rem" />
</span>
<span v-badge.danger="'5+'">
</OverlayBadge>
<OverlayBadge value="5+" severity="danger">
<i class="pi pi-calendar" style="font-size: 2rem" />
</span>
<span v-badge.danger>
</OverlayBadge>
<OverlayBadge severity="danger">
<i class="pi pi-envelope" style="font-size: 2rem" />
</span>
</OverlayBadge>
`,
options: `
<template>
<div class="card flex flex-wrap justify-center gap-6">
<span v-badge="2">
<OverlayBadge value="2">
<i class="pi pi-bell" style="font-size: 2rem" />
</span>
<span v-badge.danger="'5+'">
</OverlayBadge>
<OverlayBadge value="5+" severity="danger">
<i class="pi pi-calendar" style="font-size: 2rem" />
</span>
<span v-badge.danger>
</OverlayBadge>
<OverlayBadge severity="danger">
<i class="pi pi-envelope" style="font-size: 2rem" />
</span>
</OverlayBadge>
</div>
</template>
@ -54,15 +54,15 @@ export default {
composition: `
<template>
<div class="card flex flex-wrap justify-center gap-6">
<span v-badge="2">
<OverlayBadge value="2">
<i class="pi pi-bell" style="font-size: 2rem" />
</span>
<span v-badge.danger="'5+'">
</OverlayBadge>
<OverlayBadge value="5+" severity="danger">
<i class="pi pi-calendar" style="font-size: 2rem" />
</span>
<span v-badge.danger>
</OverlayBadge>
<OverlayBadge severity="danger">
<i class="pi pi-envelope" style="font-size: 2rem" />
</span>
</OverlayBadge>
</div>
</template>

27
doc/badge/theming/index.vue
View File

@ -9,7 +9,8 @@
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue';
export default {
@ -19,7 +20,29 @@ export default {
{
id: 'theming.styled',
label: 'Styled',
component: StyledDoc
children: [
{
id: 'theming.classes.badge',
label: 'Badge CSS Classes',
description: 'List of class names used in the styled mode.',
component: DocApiTable,
data: getStyleOptions('Badge')
},
{
id: 'theming.classes.overlaybadge',
label: 'OverlayBadge CSS Classes',
description: 'List of class names used in the styled mode.',
component: DocApiTable,
data: getStyleOptions('OverlayBadge')
},
{
id: 'theming.tokens',
label: 'Design Tokens',
description: 'List of design tokens used in a preset.',
component: DocApiTable,
data: getTokenOptions('Badge')
}
]
},
{
id: 'theming.unstyled',

2
pages/badge/index.vue
View File

@ -1,5 +1,5 @@
<template>
<DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" :apiDocs="['Badge', 'BadgeDirective']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
<DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" :apiDocs="['Badge', 'OverlayBadge']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>