New to Kendo UI for Vue? Start a free 30-day trial
Customizing Split-button
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-split-button-focus-shadow | String | $kendo-button-focus-shadow | var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14)) |
Description
The focus shadow of the SplitButton. | |||
| $kendo-split-button-arrow-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the arrow Button. | |||
| $kendo-split-button-sm-arrow-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the small arrow Button. | |||
| $kendo-split-button-md-arrow-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the medium arrow Button. | |||
| $kendo-split-button-lg-arrow-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the large arrow Button. | |||
| $kendo-split-button-arrow-padding-y | String | $kendo-button-padding-y | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the arrow Button. | |||
| $kendo-split-button-sm-arrow-padding-y | String | $kendo-button-sm-padding-y | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The vertical padding of the small arrow Button. | |||
| $kendo-split-button-md-arrow-padding-y | String | $kendo-button-md-padding-y | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the medium arrow Button. | |||
| $kendo-split-button-lg-arrow-padding-y | String | $kendo-button-lg-padding-y | var(--kendo-spacing-2\.5, 0.625rem) |
Description
The vertical padding of the large arrow Button. | |||
