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

Customizing Expander

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-expander-spacing-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical spacing of the ExpansionPanel.
$kendo-expander-border-widthNumber1px1px
Description
The width of the border around the ExpansionPanel.
$kendo-expander-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the ExpansionPanel.
$kendo-expander-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the ExpansionPanel.
$kendo-expander-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The hine height of the ExpansionPanel.
$kendo-expander-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the ExpansionPanel.
$kendo-expander-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the ExpansionPanel.
$kendo-expander-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the ExpansionPanel.
$kendo-expander-focus-shadowListinset 0 0 0 2px rgba( black, .08 )inset 0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The box shadow of the focused ExpansionPanel.
$kendo-expander-header-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the ExpansionPanel header.
$kendo-expander-header-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the ExpansionPanel header.
$kendo-expander-header-textString$kendo-expander-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the ExpansionPanel header.
$kendo-expander-header-bgColortransparenttransparent
Description
The background color of the ExpansionPanel header.
$kendo-expander-header-borderNullnullnull
Description
The border color of the ExpansionPanel header.
$kendo-expander-header-hover-bgColorrgba( black, .04 )rgba(0, 0, 0, 0.04)
Description
The background color of the hovered ExpansionPanel header.
$kendo-expander-header-focus-bgColorrgba( black, .12 )rgba(0, 0, 0, 0.12)
Description
The background color of the focused ExpansionPanel header.
$kendo-expander-header-focus-shadowStringnonenone
Description
The box shadow of the focused ExpansionPanel header.
$kendo-expander-title-textString$kendo-color-secondaryvar(--kendo-color-secondary, #e51a5f)
Description
The text color of the ExpansionPanel title.
$kendo-expander-header-sub-title-textString$kendo-subtle-textvar(--kendo-color-subtle, #757575)
Description
The text color of the ExpansionPanel sub-title.
$kendo-expander-indicator-margin-xStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The horizontal margin of the ExpansionPanel indicator.
$kendo-expander-content-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the ExpansionPanel content.
$kendo-expander-content-padding-yStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the ExpansionPanel content.

In this article

Not finding the help you need?