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

Add ScopedCSS doc

pull/5507/head
Cagatay Civici 2024-03-31 15:29:10 +03:00
parent 630f3a98e6
commit 85365de828
1 changed files with 36 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
doc/theming/styled/ScopedCSSDoc.vue
View File

@ -1,16 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Scoped CSS allows overriding the styles of a particular PrimeVue component using <i>scoped</i> SFC style and <i>:deep</i>.</p> <p>Design tokens can be scoped to a certain component using CSS variables. In an upcoming update, a special <i>dt</i> property would be introduced to generate the CSS variables from a design token object.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card flex justify-content-center gap-3">
<Panel header="Scoped Panel"> <InputSwitch v-model="checked1" class="blue-switch" />
<p class="m-0"> <InputSwitch v-model="checked2" class="amber-switch" />
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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
</div> </div>
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz /> <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode hideStackBlitz /> <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
</template> </template>
@ -18,31 +14,32 @@
export default { export default {
data() { data() {
return { return {
checked1: true,
checked2: true,
code1: { code1: {
basic: ` basic: `
<style scoped> <InputSwitch v-model="checked1" class="blue-switch" />
:deep(.p-panel .p-panel-header) { <InputSwitch v-model="checked2" class="amber-switch" />
background-color: var(--p-teal-500);
border-color: var(--p-teal-500);
color: #ffffff;
}
:deep(.p-panel .p-panel-content) {
border-color: var(--p-teal-500);
}
</style>
` `
}, },
code2: { code2: {
basic: ` basic: `
<template> <style scoped>
<Panel header="Scoped Panel"> .blue-switch {
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. --p-inputswitch-checked-background: var(--p-blue-500);
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. --p-inputswitch-checked-hover-background: var(--p-blue-500);
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat --p-inputswitch-border-radius: 4px;
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> }
</Panel>
</template> .amber-switch {
--p-inputswitch-checked-background: var(--p-amber-500);
--p-inputswitch-checked-hover-background: var(--p-amber-500);
--p-inputswitch-handle-background: var(--p-zinc-950);
--p-inputswitch-handle-hover-background: var(--p-zinc-950);
--p-inputswitch-handle-checked-background: var(--p-zinc-950);
--p-inputswitch-handle-checked-hover-background: var(--p-zinc-950);
}
</style>
` `
} }
}; };
@ -51,13 +48,18 @@ export default {
</script> </script>
<style scoped> <style scoped>
:deep(.p-panel .p-panel-header) { .blue-switch {
background-color: var(--p-teal-500); --p-inputswitch-checked-background: var(--p-blue-500);
border-color: var(--p-teal-500); --p-inputswitch-checked-hover-background: var(--p-blue-500);
color: #ffffff; --p-inputswitch-border-radius: 4px;
} }
:deep(.p-panel .p-panel-content) { .amber-switch {
border-color: var(--p-teal-500); --p-inputswitch-checked-background: var(--p-amber-500);
--p-inputswitch-checked-hover-background: var(--p-amber-500);
--p-inputswitch-handle-background: var(--p-zinc-950);
--p-inputswitch-handle-hover-background: var(--p-zinc-950);
--p-inputswitch-handle-checked-background: var(--p-zinc-950);
--p-inputswitch-handle-checked-hover-background: var(--p-zinc-950);
} }
</style> </style>