Refactor on some demo
mertsincan
parent
5f09ecd0a0
commit
8af7127be8
|
|
@ -1,8 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Each component has a special <i>pt</i> property to define an object with keys corresponding to the available DOM elements. Each value can either be an object or a function that returns an object to define the arbitrary properties to apply
|
||||
to the element such as styling, aria, data-* or custom attributes. Every component documentation has a dedicated section to document the available section names exposed via PT.
|
||||
Each component has a special <i>pt</i> property to define an object with keys corresponding to the available DOM elements. Each value can either be a string, an object or a function that returns a string or an object to define the
|
||||
arbitrary properties to apply to the element such as styling, aria, data-* or custom attributes. If the value is a string or a function that returns a string, it is considered as a class definition and added to the class attribute of the
|
||||
element. Every component documentation has a dedicated section to document the available section names exposed via PT.
|
||||
</p>
|
||||
<p>Most common usage of <i>pt</i> is styling and customization, example below styles a Panel component with PrimeFlex CSS library.</p>
|
||||
</DocSectionText>
|
||||
|
|
@ -13,6 +14,10 @@
|
|||
toggleable
|
||||
:pt="{
|
||||
header: (options) => ({
|
||||
id: 'myPanelHeader',
|
||||
style: {
|
||||
'user-select': 'none'
|
||||
},
|
||||
class: [
|
||||
'border-primary',
|
||||
{
|
||||
|
|
@ -22,8 +27,8 @@
|
|||
]
|
||||
}),
|
||||
content: { class: 'border-primary text-lg text-primary-700' },
|
||||
title: { class: 'text-xl' },
|
||||
toggler: { class: 'bg-primary hover:bg-primary-reverse' }
|
||||
title: 'text-xl',
|
||||
toggler: () => 'bg-primary hover:bg-primary-reverse'
|
||||
}"
|
||||
>
|
||||
<p class="m-0">
|
||||
|
|
@ -44,6 +49,10 @@ export default {
|
|||
<Panel header="Header" toggleable
|
||||
:pt="{
|
||||
header: (options) => ({
|
||||
id: 'myPanelHeader',
|
||||
style: {
|
||||
'user-select': 'none'
|
||||
},
|
||||
class: [
|
||||
'border-primary',
|
||||
{
|
||||
|
|
@ -53,8 +62,8 @@ export default {
|
|||
]
|
||||
}),
|
||||
content: { class: 'border-primary text-lg text-primary-700' },
|
||||
title: { class: 'text-xl' },
|
||||
toggler: { class: 'bg-primary hover:bg-primary-reverse' }
|
||||
title: 'text-xl', // OR { class: 'text-xl' }
|
||||
toggler: () => 'bg-primary hover:bg-primary-reverse' // OR { class: 'bg-primary hover:bg-primary-reverse' }
|
||||
}">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
|
@ -67,6 +76,10 @@ export default {
|
|||
<Panel header="Header" toggleable
|
||||
:pt="{
|
||||
header: (options) => ({
|
||||
id: 'myPanelHeader',
|
||||
style: {
|
||||
'user-select': 'none'
|
||||
},
|
||||
class: [
|
||||
'border-primary',
|
||||
{
|
||||
|
|
@ -76,8 +89,8 @@ export default {
|
|||
]
|
||||
}),
|
||||
content: { class: 'border-primary text-lg text-primary-700' },
|
||||
title: { class: 'text-xl' },
|
||||
toggler: { class: 'bg-primary hover:bg-primary-reverse' }
|
||||
title: 'text-xl', // OR { class: 'text-xl' }
|
||||
toggler: () => 'bg-primary hover:bg-primary-reverse' // OR { class: 'bg-primary hover:bg-primary-reverse' }
|
||||
}">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
|
@ -95,6 +108,10 @@ export default {
|
|||
<Panel header="Header" toggleable
|
||||
:pt="{
|
||||
header: (options) => ({
|
||||
id: 'myPanelHeader',
|
||||
style: {
|
||||
'user-select': 'none'
|
||||
},
|
||||
class: [
|
||||
'border-primary',
|
||||
{
|
||||
|
|
@ -104,8 +121,8 @@ export default {
|
|||
]
|
||||
}),
|
||||
content: { class: 'border-primary text-lg text-primary-700' },
|
||||
title: { class: 'text-xl' },
|
||||
toggler: { class: 'bg-primary hover:bg-primary-reverse' }
|
||||
title: 'text-xl', // OR { class: 'text-xl' }
|
||||
toggler: () => 'bg-primary hover:bg-primary-reverse' // OR { class: 'bg-primary hover:bg-primary-reverse' }
|
||||
}">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
|
|
|||
|
|
@ -21,10 +21,14 @@ const app = createApp(App);
|
|||
app.use(PrimeVue, {
|
||||
pt: {
|
||||
panel: {
|
||||
header: { class: 'bg-primary' }
|
||||
header: {
|
||||
class: 'bg-primary'
|
||||
}
|
||||
},
|
||||
autocomplete: {
|
||||
input: { root: { class: 'w-16rem' } }
|
||||
input: {
|
||||
root: 'w-16rem' // OR { class: 'w-16rem' }
|
||||
}
|
||||
}
|
||||
}
|
||||
});`
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
:pt="{
|
||||
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
|
||||
label: { class: 'text-white font-bold text-xl' },
|
||||
icon: { class: 'text-white text-2xl' }
|
||||
icon: 'text-white text-2xl'
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -30,7 +30,7 @@ export default {
|
|||
:pt="{
|
||||
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
|
||||
label: { class: 'text-white font-bold text-xl' },
|
||||
icon: { class: 'text-white text-2xl' }
|
||||
icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
|
||||
}"
|
||||
/>`,
|
||||
options: `
|
||||
|
|
@ -40,7 +40,7 @@ export default {
|
|||
:pt="{
|
||||
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
|
||||
label: { class: 'text-white font-bold text-xl' },
|
||||
icon: { class: 'text-white text-2xl' }
|
||||
icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -54,7 +54,7 @@ export default {
|
|||
:pt="{
|
||||
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
|
||||
label: { class: 'text-white font-bold text-xl' },
|
||||
icon: { class: 'text-white text-2xl' }
|
||||
icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -22,14 +22,14 @@ app.use(PrimeVue, {
|
|||
pt: {
|
||||
button: {
|
||||
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
|
||||
label: { class: 'text-white font-bold text-xl' },
|
||||
icon: { class: 'text-white text-2xl' }
|
||||
label: 'text-white font-bold text-xl', // OR { class: 'text-white font-bold text-xl' }
|
||||
icon: 'text-white text-2xl'
|
||||
},
|
||||
panel: {
|
||||
header: { class: 'bg-primary border-primary' },
|
||||
content: { class: 'border-primary text-lg text-primary-700' },
|
||||
title: { class: 'bg-primary text-xl' },
|
||||
toggler: { class: 'bg-primary hover:bg-primary-reverse' }
|
||||
header: 'bg-primary border-primary',
|
||||
content: 'border-primary text-lg text-primary-700',
|
||||
title: 'bg-primary text-xl',
|
||||
toggler: 'bg-primary hover:bg-primary-reverse'
|
||||
}
|
||||
}
|
||||
});`
|
||||
|
|
|
|||
Loading…
Reference in New Issue