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

Update SpecificityDoc.vue

pull/6537/head
tugcekucukoglu 2024-10-02 10:05:14 +03:00
parent bd34b90f69
commit e7b99ef19c
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/showcase/doc/theming/styled/csslayer/SpecificityDoc.vue
View File

@ -12,7 +12,7 @@
Another advantage of this approach is that it does not force you to figure out the built-in class names of the components. Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.
</p> </p>
<div class="card flex justify-center"> <div class="card flex justify-center">
<ToggleSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" /> <ToggleSwitch v-model="checked" :pt="{ slider: 'my-switch-slider', handle: 'my-switch-handle', icon: 'my-switch-icon' }" />
</div> </div>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
<p>Layers also make it easier to use CSS Modules, view the CSS Modules guide for examples.</p> <p>Layers also make it easier to use CSS Modules, view the CSS Modules guide for examples.</p>
@ -27,7 +27,7 @@ export default {
code: { code: {
basic: ` basic: `
<template> <template>
<ToggleSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" /> <ToggleSwitch v-model="checked" :pt="{ slider: 'my-switch-slider', handle: 'my-switch-handle', icon: 'my-switch-icon' }" />
</template> </template>
<script> <script>
@ -41,9 +41,13 @@ const checked = ref(false);
border-radius: 0; border-radius: 0;
} }
.my-switch-slider:before { .my-switch-handle {
border-radius: 0; border-radius: 0;
} }
.my-switch-icon {
display: none !important;
}
</style> </style>
` `
} }
@ -57,7 +61,11 @@ const checked = ref(false);
border-radius: 0; border-radius: 0;
} }
.my-switch-slider:before { .my-switch-handle {
border-radius: 0; border-radius: 0;
} }
.my-switch-icon {
display: none !important;
}
</style> </style>