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

Badge pt demo updates

pull/4243/head
Tuğçe Küçükoğlu 2023-08-07 16:29:11 +03:00
parent 1c5eea697a
commit e65247f541
1 changed files with 71 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
doc/badge/pt/PTDoc.vue
View File

@ -1,7 +1,21 @@
<template> <template>
<DocSectionText v-bind="$attrs"> </DocSectionText> <DocSectionText v-bind="$attrs"> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center align-items-center gap-2">
<Badge value="2" :pt="{ root: { class: 'bg-primary border-round-sm' } }" /> <Badge
value="2"
:pt="{
root: 'bg-primary border-round-xl'
}"
/>
<i
v-badge.danger="{
value: '5+',
pt: {
root: 'bg-primary'
}
}"
class="pi pi-calendar text-4xl"
/>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -12,26 +26,69 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Badge value="2" // component
<Badge
value="2"
:pt="{ :pt="{
root: { class: 'bg-primary border-round-sm' } root: 'bg-primary border-round-xl'
}" }"
/>
// directive
<i
v-badge.danger="{
value: '5+',
pt: {
root: 'bg-primary'
}
}"
class="pi pi-calendar text-4xl"
/>`, />`,
options: ` options: `
<template> <template>
<Badge value="2" <div class="card flex justify-content-center align-items-center gap-2">
:pt="{ // component
root: { class: 'bg-primary border-round-sm' } <Badge
}" value="2"
/> :pt="{
root: 'bg-primary border-round-xl'
}"
/>
// directive
<i
v-badge.danger="{
value: '5+',
pt: {
root: 'bg-primary'
}
}"
class="pi pi-calendar text-4xl"
/>
</div>
</template>`, </template>`,
composition: ` composition: `
<template> <template>
<Badge value="2" <div class="card flex justify-content-center align-items-center gap-2">
:pt="{ // component
root: { class: 'bg-primary border-round-sm' } <Badge
}" value="2"
/> :pt="{
root: 'bg-primary border-round-xl'
}"
/>
// directive
<i
v-badge.danger="{
value: '5+',
pt: {
root: 'bg-primary'
}
}"
class="pi pi-calendar text-4xl"
/>
</div>
</template>` </template>`
} }
}; };