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

Disabled style for toggle switch

pull/6011/head
Cagatay Civici 2024-07-03 12:00:25 +03:00
parent 3eb8578c92
commit bb483ef4a6
5 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/showcase/doc/radiobutton/DisabledDoc.vue
View File

@ -21,7 +21,7 @@ export default {
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center gap-2">
<RadioButton v-model="value" :value="1" disabled /> <RadioButton v-model="value" :value="1" disabled />
<RadioButton v-model="value" :value="2" disabled /> <RadioButton v-model="value" :value="2" disabled />
</div> </div>
@ -39,7 +39,7 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center gap-2">
<RadioButton v-model="value" :value="1" disabled /> <RadioButton v-model="value" :value="1" disabled />
<RadioButton v-model="value" :value="2" disabled /> <RadioButton v-model="value" :value="2" disabled />
</div> </div>

12
packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js
View File

@ -90,6 +90,18 @@ const theme = ({ dt }) => `
.p-toggleswitch.p-invalid > .p-toggleswitch-slider { .p-toggleswitch.p-invalid > .p-toggleswitch-slider {
border-color: ${dt('toggleswitch.invalid.border.color')}; border-color: ${dt('toggleswitch.invalid.border.color')};
} }
.p-toggleswitch.p-disabled {
opacity: 1;
}
.p-toggleswitch.p-disabled .p-toggleswitch-slider {
background: ${dt('toggleswitch.disabled.background')};
}
.p-toggleswitch.p-disabled .p-toggleswitch-slider:before {
background: ${dt('toggleswitch.handle.disabled.background')};
}
`; `;
const inlineStyles = { const inlineStyles = {

6
packages/themes/src/presets/aura/toggleswitch/index.js
View File

@ -19,11 +19,13 @@ export default {
checkedHoverBorderColor: 'transparent', checkedHoverBorderColor: 'transparent',
invalidBorderColor: '{form.field.invalid.border.color}', invalidBorderColor: '{form.field.invalid.border.color}',
transitionDuration: '{form.field.transition.duration}', transitionDuration: '{form.field.transition.duration}',
slideDuration: '0.2s' slideDuration: '0.2s',
disabledBackground: '{form.field.disabled.background}'
}, },
handle: { handle: {
borderRadius: '50%', borderRadius: '50%',
size: '1rem' size: '1rem',
disabledBackground: '{form.field.disabled.color}'
}, },
colorScheme: { colorScheme: {
light: { light: {

6
packages/themes/src/presets/lara/toggleswitch/index.js
View File

@ -19,11 +19,13 @@ export default {
checkedHoverBorderColor: 'transparent', checkedHoverBorderColor: 'transparent',
invalidBorderColor: '{form.field.invalid.border.color}', invalidBorderColor: '{form.field.invalid.border.color}',
transitionDuration: '{form.field.transition.duration}', transitionDuration: '{form.field.transition.duration}',
slideDuration: '0.2s' slideDuration: '0.2s',
disabledBackground: '{form.field.disabled.background}'
}, },
handle: { handle: {
borderRadius: '50%', borderRadius: '50%',
size: '1.25rem' size: '1.25rem',
disabledBackground: '{form.field.disabled.color}'
}, },
colorScheme: { colorScheme: {
light: { light: {

6
packages/themes/src/presets/nora/toggleswitch/index.js
View File

@ -23,7 +23,8 @@ export default {
checkedBackground: '{primary.color}', checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.color}', checkedHoverBackground: '{primary.color}',
transitionDuration: '{form.field.transition.duration}', transitionDuration: '{form.field.transition.duration}',
slideDuration: '0.1s' slideDuration: '0.1s',
disabledBackground: '{form.field.disabled.background}'
}, },
handle: { handle: {
borderRadius: '50%', borderRadius: '50%',
@ -31,6 +32,7 @@ export default {
background: '{form.field.border.color}', background: '{form.field.border.color}',
hoverBackground: '{form.field.border.color}', hoverBackground: '{form.field.border.color}',
checkedBackground: '{primary.contrast.color}', checkedBackground: '{primary.contrast.color}',
checkedHoverBackground: '{primary.contrast.color}' checkedHoverBackground: '{primary.contrast.color}',
disabledBackground: '{form.field.disabled.color}'
} }
}; };