Нижняя навигация

V-bottom-nav является альтернативой боковой панели. Он в основном используется на мобильных устройствах и поставляется в двух вариантах: значки и текст, а также сдвиг.

Применение

While the bottom nav is meant to be used with the vue-router, you can also programmatically control the active state of the buttons by using the active.sync prop. You can change a button's value by using its value attribute.

API

v-bottom-nav
Имя
absolute
По умолчанию
false
Тип
boolean

Позиционировать элемент абсолютно

Имя
active.sync
По умолчанию
undefined
Тип
number | string

Удерживает значение текущей активной кнопки. Если кнопка не имеет значения, вместо этого будет использоваться его индекс. Эта поддержка поддерживает модификатор .sync.

Имя
app
По умолчанию
false
Тип
boolean

Назначает компонент как часть макета приложения. Используется для динамической настройки размера содержимого

Имя
color
По умолчанию
undefined
Тип
string

Применяет заданный цвет к элементу управления

Имя
dark
По умолчанию
false
Тип
boolean

Применяет тёмный вариант темы

Имя
fixed
По умолчанию
false
Тип
boolean

Установите фиксированный элемент

Имя
height
По умолчанию
56
Тип
number | string

Установка высоты компонента

Имя
light
По умолчанию
false
Тип
boolean

Применяет светлый вариант темы

Имя
mandatory
По умолчанию
false
Тип
boolean

Components.BottomNavigation.

Имя
shift
По умолчанию
false
Тип
boolean

Скрыть текст кнопки, если не активен

Имя
value
По умолчанию
undefined
Тип
any

Контроль видимости

Примеры

Цвет и переключение

При использовании цветного фона рекомендуется использовать свойство light. Свойство shift скроет текст кнопки до тех пор, пока не будет активна. Имейте в виду, что текст v-btn должен быть обёрнут тегом <span> .

Переключатель

Как и другие компоненты Vuetify, вы можете управлять состоянием отображения с помощью v-model.

Edit this page | language on Github