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

16
doc/avatar/IconDoc.vue
View File

@ -20,7 +20,9 @@
<div class="flex-auto"> <div class="flex-auto">
<h5>Badge</h5> <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> </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" 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 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: ` options: `
<template> <template>
@ -63,7 +67,9 @@ export default {
<div class="flex-auto"> <div class="flex-auto">
<h5>Badge</h5> <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> </div>
</div> </div>
@ -93,7 +99,9 @@ export default {
<div class="flex-auto"> <div class="flex-auto">
<h5>Badge</h5> <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> </div>
</div> </div>

16
doc/avatar/ImageDoc.vue
View File

@ -13,7 +13,9 @@
<div class="flex-auto"> <div class="flex-auto">
<h5>Badge</h5> <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>
<div class="flex-auto"> <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/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
<Avatar image="/images/avatar/onyamalimba.png" 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" /> <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"> <div class="flex-auto">
<h5>Badge</h5> <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>
<div class="flex-auto"> <div class="flex-auto">
@ -80,7 +86,9 @@ export default {
<div class="flex-auto"> <div class="flex-auto">
<h5>Badge</h5> <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>
<div class="flex-auto"> <div class="flex-auto">

16
doc/avatar/LabelDoc.vue
View File

@ -20,7 +20,9 @@
<div class="flex-auto"> <div class="flex-auto">
<h5>Badge</h5> <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> </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="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 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: ` options: `
<template> <template>
@ -62,7 +66,9 @@ export default {
<div class="flex-auto"> <div class="flex-auto">
<h5>Badge</h5> <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> </div>
</template> </template>
@ -90,7 +96,9 @@ export default {
<div class="flex-auto"> <div class="flex-auto">
<h5>Badge</h5> <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> </div>
</template> </template>

6
doc/badge/ImportDoc.vue
View File

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

48
doc/badge/PositionDoc.vue
View File

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

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

@ -9,7 +9,8 @@
</template> </template>
<script> <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'; import TailwindDoc from './TailwindDoc.vue';
export default { export default {
@ -19,7 +20,29 @@ export default {
{ {
id: 'theming.styled', id: 'theming.styled',
label: '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', id: 'theming.unstyled',

2
pages/badge/index.vue
View File

@ -1,5 +1,5 @@
<template> <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> </template>
<script> <script>