Панель навигации

v-navigation-drawerКомпонент - это то, что ваши пользователи будут использовать для навигации по приложению. Панель навигации предварительно настроена для работы с vue-router прямо из коробки.

Применение

The navigation drawer is primarily used to house links to the pages in your application. Using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on desktop.

API

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

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

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

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

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

Обрезанный ящик находится под панелью инструментов приложения

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

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

Имя
disable-resize-watcher
По умолчанию
false
Тип
boolean

Будет автоматически открывать/закрывать панель при изменении размера в зависимости от мобильного или desktop.

Имя
disable-route-watcher
По умолчанию
false
Тип
boolean

Отключает открытие навигационной панели при изменении route

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

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

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

Плавающая панель не имеет видимого контейнера (без границ)

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

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

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

Скрыть отображение наложения

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

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

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

Condenses ширина панели навигации, также принимает модификатор *.sync *. При этом панель снова откроется при нажатии

Имя
mini-variant-width
По умолчанию
80
Тип
number | string

Определяет ширину, назначенную при включении prop mini

Имя
mobile-break-point
По умолчанию
1264
Тип
number | string

Задаёт установленную контрольную точку mobile

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

Панель остаётся видимой независимо от размера экрана

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

Помещает панель навигации справа

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

Удалите все автоматизированные функции состояния (изменение размера, мобильность, роут) и вручную управляйте состоянием панели

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

Временная панель находиться над своим приложением и использует холст (наложение), чтобы затемнить фон

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

Отключить touch - функциональность мобильного телефона

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

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

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

Ширина содержимого

Примеры

Цвета панели

Панель навигации может быть настроена в соответствии с дизайном любого приложения. Хотя любой компонент может использоваться в панели, основными из них будут v-list, все дочернии компоненты list и v-divider

Постоянно плавающая панель

Панель навигации может быть размещён внутри карты и плавать над фоновым контентом.

Аватары

Поскольку панель поддерживает компонент v-list, вы можете легко создавать индивидуальные решения для панели мониторинга.

Mini

В навигационной панели также есть мини-вариант, который можно управлять с помощью prop mini-variant.sync.

Временный

Временная панель находиться над своим приложением и использует холст (наложение), чтобы затемнить фон. Это поведение панели подражает нативной панели меню на мобильном устройстве. Щелчок за пределами ящика приведёт к его закрытию.

Тёмная тема

Vuetify также поддерживает тёмную тему приложения. Это не изменит компоненты, которые имеют темы по умолчанию, поэтому в некоторых случаях необходимо вручную установить тёмные темы.

Combined drawers

Drawers are flexible and are easily adapted to any use-case.

Nested lists

List tiles can be nested a second level for even more options for your navigation

Edit this page | language on Github