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>
<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>
<div class="card flex justify-center">
<Button
type="button"
label="Messages"
icon="pi pi-users"
icon="pi pi-inbox"
badge="2"
outlined
variant="outlined"
severity="secondary"
:pt="{
root: 'border-violet-500',
label: 'text-violet-900 dark:text-violet-400',
icon: 'text-violet-900 dark:text-violet-400',
root: '!px-4 !py-3',
icon: '!text-xl !text-violet-500 dark:!text-violet-400',
label: '!text-lg !text-violet-500 dark:!text-violet-400',
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 {
code: {
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="{
root: 'border-violet-500',
label: 'text-violet-900 dark:text-violet-400',
icon: 'text-violet-900 dark:text-violet-400',
root: '!px-4 !py-3',
icon: '!text-xl !text-violet-500 dark:!text-violet-400',
label: '!text-lg !text-violet-500 dark:!text-violet-400',
pcBadge: {
root: '!bg-violet-400 !text-white'
root: '!bg-violet-500 dark:!bg-violet-400 !text-white dark:!text-black'
}
}"
/>
`,
options: `
<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="{
root: 'border-violet-500',
label: 'text-violet-900 dark:text-violet-400',
icon: 'text-violet-900 dark:text-violet-400',
root: '!px-4 !py-3',
icon: '!text-xl !text-violet-500 dark:!text-violet-400',
label: '!text-lg !text-violet-500 dark:!text-violet-400',
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: `
<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="{
root: 'border-violet-500',
label: 'text-violet-900 dark:text-violet-400',
icon: 'text-violet-900 dark:text-violet-400',
root: '!px-4 !py-3',
icon: '!text-xl !text-violet-500 dark:!text-violet-400',
label: '!text-lg !text-violet-500 dark:!text-violet-400',
pcBadge: {
root: '!bg-violet-400 !text-white'
root: '!bg-violet-500 dark:!bg-violet-400 !text-white dark:!text-black'
}
}"
/>