The v-navigation-drawer component is what your users will utilize to navigate through the application. The navigation-drawer is pre-configured to work with or without vue-router right out the box. For the purpose of display, some examples are wrapped in a v-card element. Within your application you will generally place the v-navigation-drawer as a direct child of v-app.
If you are using v-navigation-drawer with app property enabled, you don't need to use absolute prop as in examples.
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. It is common to pair drawers with the v-list component using the nav property.
Выберите нужный компонент ниже и посмотрите доступные параметры, слоты, события и функции.
Applies position: absolute to the component.
Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of v-main component to function properly. You can more information about layouts on the application page. Note: this prop automatically applies position: fixed to the layout element. You can overwrite this functionality by using the absolute prop
Expands from the bottom of the screen on mobile devices
Обрезанный ящик находится под панелью инструментов приложения
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
Применить в компоненте тёмную тему. Вы можете найти больше информации в документации Material Design для [тёмных тем оформления] (https://material.io/design/color/dark-theme.html).
Будет автоматически открывать/закрывать панель при изменении размера в зависимости от мобильного или desktop.
Отключает открытие навигационной панели при изменении route
Collapses the drawer to a mini-variant until hovering with the mouse
Applies position: fixed to the component.
Плавающая панель не имеет видимого контейнера (без границ)
Sets the height of the navigation drawer
Hides the display of the overlay.
Applies the light theme variant to the component.
Condenses ширина панели навигации, также принимает модификатор *.sync *. При этом панель снова откроется при нажатии
Определяет ширину, назначенную при включении prop mini
Sets the designated mobile breakpoint for the component. This will apply alternate styles for mobile devices such as the temporary prop, or activate the bottom prop when the breakpoint value is met. Setting the value to 0 will disable this functionality.
Sets the overlay color.
Sets the overlay opacity.
Панель остаётся видимой независимо от размера экрана
Помещает панель навигации справа
Specifies a v-img as the component's background.
Удалите все автоматизированные функции состояния (изменение размера, мобильность, роут) и вручную управляйте состоянием панели
Specify a custom tag used on the root element.
Временная панель находиться над своим приложением и использует холст (наложение), чтобы затемнить фон
Отключить touch - функциональность мобильного телефона
Controls whether the component is visible or hidden.
Sets the width for the component.
A slot at the bottom of the drawer
Слот Vue по умолчанию.
Used to modify v-img properties when using the src prop
{
height: string
src: string | srcObject
}A slot at the top of the drawer
Обновлённая связанная модель
booleanEmits event object when transition is complete.
objectThe mini-variant.sync event
boolean1px !default;16 !default;Ниже приведена коллекция простых и сложных примеров.
Navigation drawers can be customized to fit any application's design. Here we apply a custom background color and an appended content area using the append slot.
Панель навигации может быть размещён внутри карты и плавать над фоновым контентом.
When using the mini-variant prop, the drawer will shrink (default 56px) and hide everything inside of v-list except the first element. In this example we use the .sync modifier that allows us to tie the expanding/contracting of the drawer programmatically.
Временная панель находиться над своим приложением и использует холст (наложение), чтобы затемнить фон. Это поведение панели подражает нативной панели меню на мобильном устройстве. Щелчок за пределами ящика приведёт к его закрытию.
Navigation drawers can also be positioned on the right side of your application (or an element). This is also useful for creating a side-sheet with auxillary information that may not have any navigation links. When using RTL you must explicitly define right for your drawer.
Places the component in mini-variant mode and expands once hovered. Does not alter the content area. To have content area respond to expand-on-hover bind mini-variant.sync to a boolean. Width can be controlled with the mini-variant-width property.
Apply a custom background to your drawer. If you need to customize v-img's properties you can use the img slot.
In this example we define a custom width to accommodate our nested drawer. Using v-row we ensure that the drawer and list stack horizontally next to each other.
Using the bottom prop, we are able to relocate our drawer on mobile devices to come from the bottom of the screen. This is an alternative style and only activates once the mobile-breakpoint is met.
Готовы к большему? Продолжить чтение с: