New to Kendo UI for Angular? Start a free 30-day trial

Customizing Splitter

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-splitter-border-width1px
Description
Width of the border around the splitter.
$kendo-splitter-font-sizevar( --kendo-font-size, initial )
Description
Font size of the splitter.
$kendo-splitter-line-heightvar( --kendo-line-height, initial )
Description
Line height of the splitter.
$kendo-splitter-font-familyvar( --kendo-font-family, initial )
Description
Font family of the splitter.
$kendo-splitter-bgvar( --kendo-component-bg, initial )
Description
Background color of the splitter.
$kendo-splitter-textvar( --kendo-component-text, initial )
Description
Text color of the splitter.
$kendo-splitter-bordervar( --kendo-component-border, initial )
Description
Border color of the splitter.
$kendo-splitter-splitbar-sizemap.get( $kendo-spacing, 3 )
Description
Size of the splitter splitbar.
$kendo-splitter-drag-handle-lengthmap.get( $kendo-spacing, 5 )
Description
Length of the splitter drag handle.
$kendo-splitter-drag-handle-thicknessmap.get( $kendo-spacing, 0.5 )
Description
thickness of the splitter drag handle.
$kendo-splitter-drag-icon-marginmap.get( $kendo-spacing, 2 )
Description
Margin of the splitter drag handle icon.
$kendo-splitter-collapse-icon-padding-xnull
Description
Horizontal padding of the collapse icon in the splitter.
$kendo-splitter-collapse-icon-padding-ymap.get( $kendo-spacing, .5 )
Description
Vertical padding of the collapse icon in the splitter.
$kendo-splitbar-bgk-get-theme-color-var( neutral-10 )
Description
Background color of the splitter splitbar.
$kendo-splitbar-textvar( --kendo-component-text, initial )
Description
Text color of the splitter splitbar.
$kendo-splitbar-hover-bgk-get-theme-color-var( neutral-20 )
Description
Hover background color of the splitter splitbar.
$kendo-splitbar-hover-text$kendo-splitbar-text
Description
Hover text color of the splitter splitbar.
$kendo-splitbar-selected-bgk-get-theme-color-var( primary-100 )
Description
Selected background color of the splitter splitbar.
$kendo-splitbar-selected-textvar( --kendo-component-bg, inherit )
Description
Selected text color of the splitter splitbar.
$kendo-splitter-splitbar-static-sizemap.get( $kendo-spacing, 0.5 )
Description
Size of the splitter static splitbar.

In this article

Not finding the help you need?