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

Customizing Appbar

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-appbar-margin-xNullnullnull
Description
The horizontal margin of the AppBar.
$kendo-appbar-margin-yNullnullnull
Description
The vertical margin of the AppBar.
$kendo-appbar-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the AppBar.
$kendo-appbar-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the AppBar.
$kendo-appbar-border-widthNumber0px0px
Description
The width of the border around the AppBar.
$kendo-appbar-zindexNumber10001000
Description
The z-index of the AppBar.
$kendo-appbar-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the AppBar.
$kendo-appbar-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the AppBar.
$kendo-appbar-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the AppBar.
$kendo-appbar-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the AppBar sections.
$kendo-appbar-light-bgString$kendo-color-lightvar(--kendo-color-light, #f5f5f5)
Description
The background color of the AppBar based on light theme color.
$kendo-appbar-light-textStringif($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light ))var(--kendo-color-on-light, #000000)
Description
TThe text color of the AppBar based on light theme color.
$kendo-appbar-dark-bgString$kendo-color-darkvar(--kendo-color-dark, #424242)
Description
The background color of the AppBar based on dark theme color.
$kendo-appbar-dark-textStringif($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark ))var(--kendo-color-on-dark, #ffffff)
Description
The text color of the AppBar based on dark theme color.
$kendo-appbar-box-shadowString$box-shadow-depth-4var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))
Description
The box shadow of the AppBar.
$kendo-appbar-bottom-box-shadowString$kendo-appbar-box-shadowvar(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))
Description
The box shadow of the AppBar with bottom position.

In this article

Not finding the help you need?