New to Kendo UI for Angular? Start a free 30-day trial
Customizing Bottom-navigation
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-bottom-nav-padding-x | String | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The horizontal padding of the BottomNavigation. | |||
| $kendo-bottom-nav-padding-y | String | $kendo-bottom-nav-padding-x | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The vertical padding of the BottomNavigation. | |||
| $kendo-bottom-nav-gap | String | $kendo-bottom-nav-padding-x | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The spacing between the BottomNavigation items. | |||
| $kendo-bottom-nav-border-width | List | 1px 0px 0px 0px | 1px 0px 0px 0px |
Description
The width of the border around the BottomNavigation. | |||
| $kendo-bottom-nav-font-family | String | var( --kendo-font-family, inherit) | var(--kendo-font-family, inherit) |
Description
The font family of the BottomNavigation. | |||
| $kendo-bottom-nav-font-size | String | var( --kendo-font-size, 1rem ) | var(--kendo-font-size, 1rem) |
Description
The font size of the BottomNavigation. | |||
| $kendo-bottom-nav-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the BottomNavigation. | |||
| $kendo-bottom-nav-letter-spacing | Number | .2px | 0.2px |
Description
The letter spacing of the BottomNavigation. | |||
| $kendo-bottom-nav-item-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the BottomNavigation item. | |||
| $kendo-bottom-nav-item-padding-y | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The vertical padding of the BottomNavigation item. | |||
| $kendo-bottom-nav-item-min-width | Number | 72px | 72px |
Description
The minimum width of the BottomNavigation item. | |||
| $kendo-bottom-nav-item-max-width | String | none | none |
Description
The maximum width of the BottomNavigation item. | |||
| $kendo-bottom-nav-item-min-height | Calculation | calc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) ) | calc(var(--kendo-icon-size, 1.5rem) * 2 + var(--kendo-spacing-0\.5, 0.125rem) * 2) |
Description
The minimum height of the BottomNavigation item. | |||
| $kendo-bottom-nav-item-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.25rem) |
Description
The border radius of the BottomNavigation item. | |||
| $kendo-bottom-nav-item-gap | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The spacing of the BottomNavigation item. | |||
| $kendo-bottom-nav-item-focus-offset | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The offset of the focused BottomNavigation item. | |||
| $kendo-bottom-nav-item-focus-outline-width | Number | 1px | 1px |
Description
The outline width of the focused BottomNavigation item. | |||
| $kendo-bottom-nav-item-focus-outline-style | String | solid | solid |
Description
The outline style of the focused BottomNavigation item. | |||
| $kendo-bottom-nav-shadow | String | var( --kendo-box-shadow-depth-4, none ) | var(--kendo-box-shadow-depth-4, none) |
Description
The box shadow of the BottomNavigation. | |||
| $kendo-bottom-nav-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 BottomNavigation. | |||
| $kendo-bottom-nav-theme-colors | Map | () | (solid: (primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4), focus-bg: var(--kendo-color-primary, #0078d4), focus-text: var(--kendo-color-on-primary, #ffffff), focus-border: var(--kendo-color-primary, #0078d4), focus-outline: inherit, active-bg: var(--kendo-color-primary-active, #005a9e), active-text: var(--kendo-color-on-primary, #ffffff), active-border: var(--kendo-color-primary-active, #005a9e), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-primary, #ffffff) 46%, transparent), disabled-border: transparent), error: (bg: var(--kendo-color-error, #c2666b), text: var(--kendo-color-on-error, #ffffff), border: var(--kendo-color-error, #c2666b), focus-bg: var(--kendo-color-error, #c2666b), focus-text: var(--kendo-color-on-error, #ffffff), focus-border: var(--kendo-color-error, #c2666b), focus-outline: inherit, active-bg: var(--kendo-color-error-active, #ae3b41), active-text: var(--kendo-color-on-error, #ffffff), active-border: var(--kendo-color-error-active, #ae3b41), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-error, #ffffff) 46%, transparent), disabled-border: transparent), success: (bg: var(--kendo-color-success, #55a554), text: var(--kendo-color-on-success, #ffffff), border: var(--kendo-color-success, #55a554), focus-bg: var(--kendo-color-success, #55a554), focus-text: var(--kendo-color-on-success, #ffffff), focus-border: var(--kendo-color-success, #55a554), focus-outline: inherit, active-bg: var(--kendo-color-success-active, #278a27), active-text: var(--kendo-color-on-success, #ffffff), active-border: var(--kendo-color-success-active, #278a27), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-success, #ffffff) 46%, transparent), disabled-border: transparent), info: (bg: var(--kendo-color-info, #0a7eff), text: var(--kendo-color-on-info, #ffffff), border: var(--kendo-color-info, #0a7eff), focus-bg: var(--kendo-color-info, #0a7eff), focus-text: var(--kendo-color-on-info, #ffffff), focus-border: var(--kendo-color-info, #0a7eff), focus-outline: inherit, active-bg: var(--kendo-color-info-active, #085ebf), active-text: var(--kendo-color-on-info, #ffffff), active-border: var(--kendo-color-info-active, #085ebf), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-info, #ffffff) 46%, transparent), disabled-border: transparent), secondary: (bg: var(--kendo-color-secondary, #979593), text: var(--kendo-color-on-secondary, #ffffff), border: var(--kendo-color-secondary, #979593), focus-bg: var(--kendo-color-secondary, #979593), focus-text: var(--kendo-color-on-secondary, #ffffff), focus-border: var(--kendo-color-secondary, #979593), focus-outline: inherit, active-bg: var(--kendo-color-secondary-active, #797775), active-text: var(--kendo-color-on-secondary, #ffffff), active-border: var(--kendo-color-secondary-active, #797775), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-secondary, #ffffff) 46%, transparent), disabled-border: transparent), tertiary: (bg: var(--kendo-color-tertiary, #2b88d8), text: var(--kendo-color-on-tertiary, #ffffff), border: var(--kendo-color-tertiary, #2b88d8), focus-bg: var(--kendo-color-tertiary, #2b88d8), focus-text: var(--kendo-color-on-tertiary, #ffffff), focus-border: var(--kendo-color-tertiary, #2b88d8), focus-outline: inherit, active-bg: var(--kendo-color-tertiary-active, #2473b7), active-text: var(--kendo-color-on-tertiary, #ffffff), active-border: var(--kendo-color-tertiary-active, #2473b7), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-tertiary, #ffffff) 46%, transparent), disabled-border: transparent), warning: (bg: var(--kendo-color-warning, #ffc80a), text: var(--kendo-color-on-warning, #323130), border: var(--kendo-color-warning, #ffc80a), focus-bg: var(--kendo-color-warning, #ffc80a), focus-text: var(--kendo-color-on-warning, #323130), focus-border: var(--kendo-color-warning, #ffc80a), focus-outline: var(--kendo-color-app-surface, #ffffff), active-bg: var(--kendo-color-warning-active, #e0b000), active-text: var(--kendo-color-on-warning, #323130), active-border: var(--kendo-color-warning-active, #e0b000), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-warning, #323130) 46%, transparent), disabled-border: transparent), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130), focus-bg: var(--kendo-color-dark, #323130), focus-text: var(--kendo-color-on-dark, #ffffff), focus-border: var(--kendo-color-dark, #323130), focus-outline: var(--kendo-color-on-dark, #ffffff), active-bg: var(--kendo-color-dark-active, #000000), active-text: var(--kendo-color-on-dark, #ffffff), active-border: var(--kendo-color-dark-active, #000000), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-dark, #ffffff) 46%, transparent), disabled-border: transparent), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce), focus-bg: var(--kendo-color-light, #d2d0ce), focus-text: var(--kendo-color-on-light, #323130), focus-border: var(--kendo-color-light, #d2d0ce), focus-outline: var(--kendo-color-app-surface, #ffffff), active-bg: var(--kendo-color-light-active, #a19f9d), active-text: var(--kendo-color-on-light, #323130), active-border: var(--kendo-color-light-active, #a19f9d), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-light, #323130) 46%, transparent), disabled-border: transparent)), flat: (primary: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent), focus-bg: inherit, focus-text: var(--kendo-color-primary, #0078d4), focus-border: transparent, focus-outline: var(--kendo-color-primary, #0078d4), active-bg: inherit, active-text: var(--kendo-color-primary, #0078d4), active-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), error: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent), focus-bg: inherit, focus-text: var(--kendo-color-error, #c2666b), focus-border: transparent, focus-outline: var(--kendo-color-error, #c2666b), active-bg: inherit, active-text: var(--kendo-color-error, #c2666b), active-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), success: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent), focus-bg: inherit, focus-text: var(--kendo-color-success, #55a554), focus-border: transparent, focus-outline: var(--kendo-color-success, #55a554), active-bg: inherit, active-text: var(--kendo-color-success, #55a554), active-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), info: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent), focus-bg: inherit, focus-text: var(--kendo-color-info, #0a7eff), focus-border: transparent, focus-outline: var(--kendo-color-info, #0a7eff), active-bg: inherit, active-text: var(--kendo-color-info, #0a7eff), active-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), secondary: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent), focus-bg: inherit, focus-text: var(--kendo-color-secondary, #979593), focus-border: transparent, focus-outline: var(--kendo-color-secondary, #979593), active-bg: inherit, active-text: var(--kendo-color-secondary, #979593), active-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), tertiary: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent), focus-bg: inherit, focus-text: var(--kendo-color-tertiary, #2b88d8), focus-border: transparent, focus-outline: var(--kendo-color-tertiary, #2b88d8), active-bg: inherit, active-text: var(--kendo-color-tertiary, #2b88d8), active-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), warning: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: var(--kendo-color-warning, #ffc80a), focus-bg: inherit, focus-text: var(--kendo-color-warning, #ffc80a), focus-border: transparent, focus-outline: var(--kendo-color-warning, #ffc80a), active-bg: inherit, active-text: var(--kendo-color-warning, #ffc80a), active-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), dark: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: var(--kendo-color-dark, #323130), focus-bg: inherit, focus-text: var(--kendo-color-dark, #323130), focus-border: transparent, focus-outline: var(--kendo-color-dark, #323130), active-bg: inherit, active-text: var(--kendo-color-dark, #323130), active-border: transparent, disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), light: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: transparent, focus-bg: inherit, focus-text: var(--kendo-color-light, #d2d0ce), focus-border: transparent, focus-outline: var(--kendo-color-light, #d2d0ce), active-bg: inherit, active-text: var(--kendo-color-light, #d2d0ce), active-border: transparent, disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial))) |
Description
The theme colors map for the BottomNavigation variations. | |||
