diff --git a/packages/api-generator/src/locale/en/VSwitch.json b/packages/api-generator/src/locale/en/VSwitch.json index 62a133a5cc8..b9de3b611e4 100644 --- a/packages/api-generator/src/locale/en/VSwitch.json +++ b/packages/api-generator/src/locale/en/VSwitch.json @@ -3,7 +3,7 @@ "props": { "flat": "Display component without elevation. Default elevation for thumb is 4dp, `flat` resets it.", "indeterminate": "Sets an indeterminate state for the switch.", - "inset": "Enlarge the `v-switch` track to encompass the thumb.", + "inset": "Controls the track and thumb styling\n- **tonal** (or `true`) enlarges the track to encompass the thumb\n- **material** applies the Material Design 3 treatment: an outlined track that fills when on and a thumb that morphs between states\n- **square** is the **material** variant with less round corners.", "loading": "Displays circular progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color.", "multiple": "Changes expected model to an array." }, diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/packages/vuetify/src/components/VSwitch/VSwitch.sass index 219af1772ec..4286b5c1f87 100644 --- a/packages/vuetify/src/components/VSwitch/VSwitch.sass +++ b/packages/vuetify/src/components/VSwitch/VSwitch.sass @@ -151,6 +151,13 @@ .v-icon opacity: .4 + .v-switch--inset-square + .v-switch__track + border-radius: $switch-inset-square-track-radius + + .v-switch__thumb + border-radius: $switch-inset-square-thumb-radius + .v-switch $switch-thumb-transform: $switch-track-width * .5 - $switch-thumb-width * .5 + $switch-thumb-offset diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.tsx b/packages/vuetify/src/components/VSwitch/VSwitch.tsx index 442b660ce3c..5df664a984d 100644 --- a/packages/vuetify/src/components/VSwitch/VSwitch.tsx +++ b/packages/vuetify/src/components/VSwitch/VSwitch.tsx @@ -45,7 +45,7 @@ export type VSwitchSlots = export const makeVSwitchProps = propsFactory({ inset: { - type: [Boolean, String] as PropType, + type: [Boolean, String] as PropType, default: false, }, flat: Boolean, @@ -125,7 +125,8 @@ export const VSwitch = genericComponent( 'v-switch', { 'v-switch--flat': props.flat }, { 'v-switch--inset': !!props.inset }, - { 'v-switch--inset-material': props.inset === 'material' }, + { 'v-switch--inset-material': isMaterial }, + { 'v-switch--inset-square': props.inset === 'square' }, { 'v-switch--indeterminate': indeterminate.value }, loaderClasses.value, props.class, diff --git a/packages/vuetify/src/components/VSwitch/_variables.scss b/packages/vuetify/src/components/VSwitch/_variables.scss index 4e35dde525c..a8a0eca8aa9 100644 --- a/packages/vuetify/src/components/VSwitch/_variables.scss +++ b/packages/vuetify/src/components/VSwitch/_variables.scss @@ -18,6 +18,9 @@ $switch-inset-track-width: 52px !default; $switch-inset-track-opacity: 1 !default; $switch-inset-border-width: 2px !default; +$switch-inset-square-track-radius: 6px !default; +$switch-inset-square-thumb-radius: 4px !default; + $switch-inset-unselected-track-color: color-mix(in srgb, rgb(var(--v-theme-on-surface-variant)) 50%, #888) !default; $switch-inset-unselected-thumb-color: color-mix(in srgb, rgb(var(--v-theme-surface-variant)) 50%, #888) !default; $switch-inset-unselected-border-color: $switch-inset-unselected-thumb-color !default;