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

Improved pcPrefix Demo

pull/6674/head
Cagatay Civici 2024-10-28 18:22:36 +03:00
parent e2040e9bb2
commit 4a564482b0
1 changed files with 44 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
apps/showcase/doc/passthrough/PCPrefixDoc.vue
View File

@ -1,20 +1,24 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Section names that start with the <i>pc</i> prefix indicate that the element is a PrimeVue component not a DOM element.</p> <p>
Section names prefixed with <i>pc</i> denote PrimeVue components, distinguishing them from standard DOM elements and indicating the necessity for a nested structure. For example, the "badge" section is identified as <i>pcBadge</i> because
the button component incorporates the badge component internally.
</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button <Button
type="button" type="button"
label="Messages" label="Messages"
icon="pi pi-users" icon="pi pi-inbox"
badge="2" badge="2"
outlined variant="outlined"
severity="secondary"
:pt="{ :pt="{
root: 'border-violet-500', root: '!px-4 !py-3',
label: 'text-violet-900 dark:text-violet-400', icon: '!text-xl !text-violet-500 dark:!text-violet-400',
icon: 'text-violet-900 dark:text-violet-400', label: '!text-lg !text-violet-500 dark:!text-violet-400',
pcBadge: { pcBadge: {
root: '!bg-violet-400 !text-white' root: '!bg-violet-500 dark:!bg-violet-400 !text-white dark:!text-black'
} }
}" }"
/> />
@ -28,26 +32,38 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined <Button
type="button"
label="Messages"
icon="pi pi-inbox"
badge="2"
variant="outlined"
severity="secondary"
:pt="{ :pt="{
root: 'border-violet-500', root: '!px-4 !py-3',
label: 'text-violet-900 dark:text-violet-400', icon: '!text-xl !text-violet-500 dark:!text-violet-400',
icon: 'text-violet-900 dark:text-violet-400', label: '!text-lg !text-violet-500 dark:!text-violet-400',
pcBadge: { pcBadge: {
root: '!bg-violet-400 !text-white' root: '!bg-violet-500 dark:!bg-violet-400 !text-white dark:!text-black'
} }
}" }"
/> />
`, `,
options: ` options: `
<template> <template>
<Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined <Button
type="button"
label="Messages"
icon="pi pi-inbox"
badge="2"
variant="outlined"
severity="secondary"
:pt="{ :pt="{
root: 'border-violet-500', root: '!px-4 !py-3',
label: 'text-violet-900 dark:text-violet-400', icon: '!text-xl !text-violet-500 dark:!text-violet-400',
icon: 'text-violet-900 dark:text-violet-400', label: '!text-lg !text-violet-500 dark:!text-violet-400',
pcBadge: { pcBadge: {
root: '!bg-violet-400 !text-white' root: '!bg-violet-500 dark:!bg-violet-400 !text-white dark:!text-black'
} }
}" }"
/> />
@ -55,13 +71,19 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined <Button
type="button"
label="Messages"
icon="pi pi-inbox"
badge="2"
variant="outlined"
severity="secondary"
:pt="{ :pt="{
root: 'border-violet-500', root: '!px-4 !py-3',
label: 'text-violet-900 dark:text-violet-400', icon: '!text-xl !text-violet-500 dark:!text-violet-400',
icon: 'text-violet-900 dark:text-violet-400', label: '!text-lg !text-violet-500 dark:!text-violet-400',
pcBadge: { pcBadge: {
root: '!bg-violet-400 !text-white' root: '!bg-violet-500 dark:!bg-violet-400 !text-white dark:!text-black'
} }
}" }"
/> />