New to Kendo UI for Angular? Start a free 30-day trial
Customizing Appbar
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-appbar-margin-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal margin of the AppBar. | |||
| $kendo-appbar-margin-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The vertical margin of the AppBar. | |||
| $kendo-appbar-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the AppBar. | |||
| $kendo-appbar-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the AppBar. | |||
| $kendo-appbar-border-width | Number | 0px | 0px |
Description
The width of the border around the AppBar. | |||
| $kendo-appbar-zindex | Number | 1000 | 1000 |
Description
The z-index of the AppBar. | |||
| $kendo-appbar-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the AppBar. | |||
| $kendo-appbar-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the AppBar. | |||
| $kendo-appbar-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the AppBar. | |||
| $kendo-appbar-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing between the AppBar sections. | |||
| $kendo-appbar-text | String | var( --kendo-component-text, initial ) | var(--kendo-component-text, initial) |
Description
The text color of the AppBar. | |||
| $kendo-appbar-bg | String | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | var(--kendo-color-surface, #faf9f8) |
Description
The background color of the AppBar. | |||
| $kendo-appbar-border | String | var( --kendo-component-border, initial ) | var(--kendo-component-border, initial) |
Description
The border color of the AppBar. | |||
| $kendo-appbar-brand-colors | Map | (
primary: primary,
error: error,
success: success,
info: info,
secondary: if($kendo-enable-color-system, secondary, neutral),
tertiary: tertiary,
) | (primary: primary, error: error, success: success, info: info, secondary: secondary, tertiary: tertiary) |
Description
The theme variations for the AppBar. | |||
| $kendo-appbar-theme-colors | Map | () | (primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4)), error: (bg: var(--kendo-color-error, #c2666b), text: var(--kendo-color-on-error, #ffffff), border: var(--kendo-color-error, #c2666b)), success: (bg: var(--kendo-color-success, #55a554), text: var(--kendo-color-on-success, #ffffff), border: var(--kendo-color-success, #55a554)), info: (bg: var(--kendo-color-info, #0a7eff), text: var(--kendo-color-on-info, #ffffff), border: var(--kendo-color-info, #0a7eff)), secondary: (bg: var(--kendo-color-secondary, #979593), text: var(--kendo-color-on-secondary, #ffffff), border: var(--kendo-color-secondary, #979593)), tertiary: (bg: var(--kendo-color-tertiary, #2b88d8), text: var(--kendo-color-on-tertiary, #ffffff), border: var(--kendo-color-tertiary, #2b88d8)), warning: (bg: var(--kendo-color-warning, #ffc80a), text: var(--kendo-color-on-warning, #323130), border: var(--kendo-color-warning, #ffc80a)), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130)), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce))) |
Description
The theme colors map for the AppBar variations. | |||
