VBottomNavigation API
name | type | default |
|---|---|---|
boolean
| false | |
Applies position: absolute to the component. | ||
boolean
| true | |
Controls the active state of the item. This is typically used to highlight the component. | ||
string
| undefined | |
Sets the color of component when not focused. | ||
string
| undefined | |
Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without | ||
string | number | boolean | false | |
Applies utility border classes to the component. To use it, you need to omit the | ||
string
| undefined | |
Applies specified color to the control - supports utility colors with or without | ||
'default' | 'comfortable' | 'compact' | 'default' | |
Adjusts the vertical height used by the component. | ||
boolean
| false | |
Puts all children components into a disabled state. | ||
string | number | undefined | |
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page. | ||
boolean
| false | |
Force all v-btn children to take up all available horizontal space. | ||
string | number | 56 | |
Sets the height for the component. | ||
boolean | 'force' | false | |
Forces at least one item to always be selected (if available). | ||
number
| undefined | |
Sets a maximum number of selections that can be made. | ||
string
| undefined | |
Changes the orientation and active state styling of the component. | ||
unknown
| undefined | |
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
boolean
| false | |
Allows one to select multiple items. | ||
string
| 'bottom-navigation' | |
Assign a specific name for layout registration. | ||
string | number | 0 | |
Adjust the order of the component in relation to its registration order. | ||
string | number | boolean | undefined | |
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page. | ||
string
| 'v-btn--selected' | |
Configure the active CSS class applied when an item is selected. | ||
string | (new () => any) | FunctionalComponent | 'header' | |
Specify a custom tag used on the root element. | ||
string
| undefined | |
Specify a theme for this component and all of its children. | ||
boolean
| false | |
Removes any applied border-radius from the component. | ||
name | type | |
|---|---|---|
[any] | ||
Event that is emitted when the active state changes. | ||
[unknown] | ||
Event that is emitted when the component’s model changes. | ||
The default Vue slot. | ||
name | default |
|---|---|
rgb(var(--v-theme-surface)) | |
( $bottom-navigation-border-color, $bottom-navigation-border-style, $bottom-navigation-border-width, $bottom-navigation-border-thin-width ) | |
settings.$border-color-root | |
map.get(settings.$rounded, '0') | |
settings.$border-style-root | |
thin | |
0 | |
functions.theme-color('on-surface', var(--v-medium-emphasis-opacity)) | |
functions.theme-color('on-surface', var(--v-high-emphasis-opacity)) | |
functions.map-deep-get(variables.$typography, 'label-small', 'size') | |
2 | |
0 | |
100% | |
1.5rem | |
168px | |
80px | |
var(--v-medium-emphasis-opacity) | |
functions.theme-color('on-surface', 0) | |
math.div($bottom-navigation-icon-font-size, 3) | |
translateY($bottom-navigation-shift-icon-top) | |
none | |
( $bottom-navigation-background, $bottom-navigation-color ) | |
transform, color, .2s, .1s settings.$standard-easing |