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

Customizing Treeview

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-treeview-font-familyNullnullnull
Description
Font family of the treeview component.
$kendo-treeview-sizesMap( sm: ( font-size: $kendo-font-size-sm, line-height: $kendo-line-height-sm, filter-padding-x: k-spacing(1), filter-padding-y: k-spacing(1), indent: k-spacing(4), icon-spacing: k-spacing(1), checkbox-spacing: k-spacing(1), item-padding-x: k-spacing(2), item-padding-y: k-spacing(1), item-border-radius: k-spacing(0.5) ), md: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, filter-padding-x: k-spacing(2), filter-padding-y: k-spacing(2), indent: k-spacing(4), icon-spacing: k-spacing(1), checkbox-spacing: k-spacing(1), item-padding-x: k-map-get( $kendo-spacing, 2.5 ), item-padding-y: k-spacing(1.5), item-border-radius: k-spacing(1) ), lg: ( font-size: $kendo-font-size-lg, line-height: $kendo-line-height-lg, filter-padding-x: k-spacing(3), filter-padding-y: k-spacing(3), indent: k-spacing(4), icon-spacing: k-spacing(1), checkbox-spacing: k-spacing(1), item-padding-x: k-spacing(3), item-padding-y: k-spacing(2), item-border-radius: k-spacing(2) ) )(sm: (font-size: 0.875rem, line-height: 1.25, filter-padding-x: var(--kendo-spacing-1, 0.25rem), filter-padding-y: var(--kendo-spacing-1, 0.25rem), indent: var(--kendo-spacing-4, 1rem), icon-spacing: var(--kendo-spacing-1, 0.25rem), checkbox-spacing: var(--kendo-spacing-1, 0.25rem), item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-1, 0.25rem), item-border-radius: var(--kendo-spacing-0\.5, 0.125rem)), md: (font-size: 1rem, line-height: 1.5, filter-padding-x: var(--kendo-spacing-2, 0.5rem), filter-padding-y: var(--kendo-spacing-2, 0.5rem), indent: var(--kendo-spacing-4, 1rem), icon-spacing: var(--kendo-spacing-1, 0.25rem), checkbox-spacing: var(--kendo-spacing-1, 0.25rem), item-padding-x: 0.625rem, item-padding-y: var(--kendo-spacing-1\.5, 0.375rem), item-border-radius: var(--kendo-spacing-1, 0.25rem)), lg: (font-size: 1.25rem, line-height: 1.75, filter-padding-x: var(--kendo-spacing-3, 0.75rem), filter-padding-y: var(--kendo-spacing-3, 0.75rem), indent: var(--kendo-spacing-4, 1rem), icon-spacing: var(--kendo-spacing-1, 0.25rem), checkbox-spacing: var(--kendo-spacing-1, 0.25rem), item-padding-x: var(--kendo-spacing-3, 0.75rem), item-padding-y: var(--kendo-spacing-2, 0.5rem), item-border-radius: var(--kendo-spacing-2, 0.5rem)))
Description
The sizes of the treeview.

In this article

Not finding the help you need?