Панель навигации
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
Позиционировать элемент абсолютно
Назначает компонент как часть макета приложения. Используется для динамической настройки размера содержимого
Обрезанный ящик находится под панелью инструментов приложения
Применяет тёмный вариант темы
Будет автоматически открывать/закрывать панель при изменении размера в зависимости от мобильного или desktop.
Отключает открытие навигационной панели при изменении route
Установите фиксированный элемент
Плавающая панель не имеет видимого контейнера (без границ)
Установка высоты компонента
Скрыть отображение наложения
Применяет светлый вариант темы
Condenses ширина панели навигации, также принимает модификатор *.sync *. При этом панель снова откроется при нажатии
Определяет ширину, назначенную при включении prop mini
Задаёт установленную контрольную точку mobile
Панель остаётся видимой независимо от размера экрана
Помещает панель навигации справа
Удалите все автоматизированные функции состояния (изменение размера, мобильность, роут) и вручную управляйте состоянием панели
Временная панель находиться над своим приложением и использует холст (наложение), чтобы затемнить фон
Отключить touch - функциональность мобильного телефона
Контроль видимости
Ширина содержимого
Примеры
Цвета панели
Панель навигации может быть настроена в соответствии с дизайном любого приложения. Хотя любой компонент может использоваться в панели, основными из них будут 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