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

PC Prefix section added

pull/6449/head
tugcekucukoglu 2024-09-20 14:56:25 +03:00
parent ad63b5994e
commit 0d71d3224c
2 changed files with 80 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
apps/showcase/doc/passthrough/PCPrefixDoc.vue Normal file
View File

@ -0,0 +1,74 @@
<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>
</DocSectionText>
<div class="card flex justify-center">
<Button
type="button"
label="Messages"
icon="pi pi-users"
badge="2"
outlined
:pt="{
root: 'border-violet-500',
label: 'text-violet-900 dark:text-violet-400',
icon: 'text-violet-900 dark:text-violet-400',
pcBadge: {
root: '!bg-violet-400 !text-white'
}
}"
/>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
:pt="{
root: 'border-violet-500',
label: 'text-violet-900 dark:text-violet-400',
icon: 'text-violet-900 dark:text-violet-400',
pcBadge: {
root: '!bg-violet-400 !text-white'
}
}"
/>
`,
options: `
<template>
<Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
:pt="{
root: 'border-violet-500',
label: 'text-violet-900 dark:text-violet-400',
icon: 'text-violet-900 dark:text-violet-400',
pcBadge: {
root: '!bg-violet-400 !text-white'
}
}"
/>
</template>
`,
composition: `
<template>
<Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
:pt="{
root: 'border-violet-500',
label: 'text-violet-900 dark:text-violet-400',
icon: 'text-violet-900 dark:text-violet-400',
pcBadge: {
root: '!bg-violet-400 !text-white'
}
}"
/>
</template>
`
}
};
}
};
</script>

6
apps/showcase/pages/passthrough/index.vue
View File

@ -21,6 +21,7 @@ import CustomCSSDoc from '@/doc/passthrough/CustomCSSDoc.vue';
import DeclarativeDoc from '@/doc/passthrough/DeclarativeDoc.vue';
import GlobalDoc from '@/doc/passthrough/GlobalDoc.vue';
import LifecycleDoc from '@/doc/passthrough/LifecycleDoc.vue';
import PCPrefixDoc from '@/doc/passthrough/PCPrefixDoc.vue';
import UsePassThroughDoc from '@/doc/passthrough/UsePassThroughDoc.vue';
export default {
@ -37,6 +38,11 @@ export default {
label: 'Declarative',
component: DeclarativeDoc
},
{
id: 'pcprefix',
label: 'PC Prefix',
component: PCPrefixDoc
},
{
id: 'lifecycle',
label: 'Lifecycle',