New to Kendo UI for Vue? Start a free 30-day trial
Customizing Switch
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-switch-font-family | Null | null | null |
Description
Font family of the switch. | |||
| $kendo-switch-track-border-width | Number | 1px | 1px |
Description
Border width of the switch track. | |||
| $kendo-switch-thumb-border-width | Number | 0 | 0 |
Description
Border width of the switch thumb. | |||
| $kendo-switch-label-text-transform | String | uppercase | uppercase |
Description
Text transform of the switch label. | |||
| $kendo-switch-label-display | String | none | none |
Description
Display of the switch label. | |||
| $kendo-switch-sizes | Map | (
sm: (
font-size: $kendo-font-size-sm,
track-width: 36px,
track-height: 16px,
thumb-width: 10px,
thumb-height: 10px,
thumb-offset: 3px,
label-offset: 4px
),
md: (
font-size: $kendo-font-size-sm,
track-width: 40px,
track-height: 20px,
thumb-width: 12px,
thumb-height: 12px,
thumb-offset: 4px,
label-offset: 5px
),
lg: (
font-size: $kendo-font-size-sm,
track-width: 44px,
track-height: 24px,
thumb-width: 14px,
thumb-height: 14px,
thumb-offset: 5px,
label-offset: 6px
)
) |
|
Description
Map with the different switch sizes. | |||
