vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Showcase updates

Browse source
This commit is contained in:
tugcekucukoglu 2024-04-18 17:22:30 +03:00
parent fcf8599cfa
commit b2ec54e364
134 changed files with 6160 additions and 1238 deletions
Download patch file Download diff file Expand all files Collapse all files

8
doc/theming/styled/csslayer/SpecificityDoc.vue
View file

@ -7,12 +7,12 @@
written. The <i>cssLayer</i> is disabled by default to avoid compatibility issues with 3rd party CSS libraries which requires a layer configuration for compatibility that is discussed in the next reset section.
</p>
<p>
For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, <i>.p-inputswitch .p-inputswitch-slider</i> selector needs to be overriden. Without the
layers, we'd have to write a stronger css or use <i>!important</i> however, with layers, this does not present an issue as your CSS can always override PrimeVue with a more straightforward class name such as <i>my-switch-slider</i>.
For example, let's assume you need to remove the rounded borders of the ToggleSwitch component defined by the theme in use. In order to achieve this, <i>.p-toggleswitch .p-toggleswitch-slider</i> selector needs to be overriden. Without
the layers, we'd have to write a stronger css or use <i>!important</i> however, with layers, this does not present an issue as your CSS can always override PrimeVue with a more straightforward class name such as <i>my-switch-slider</i>.
Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.
</p>
<div class="card flex justify-content-center">
<InputSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
<ToggleSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
</div>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
<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: {
basic: `
<template>
<InputSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
<ToggleSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
</template>
<script>