Navigation drawer
El componente v-navigation-drawer es lo que quieres que tus usuarios utilicen para navegar la aplicación. El navigation-drawer está preconfigurado para funcionar con o sin vue-router desde el inicio.
Uso
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
Posiciona el elemento como absolute
Indica que el componente es parte del layout de la aplicación. Se utiliza para ajustar dinámicamente el tamaño del contenido.
El drawer queda debajo de la barra de herramientas de la aplicación
Aplica la variante del tema dark
Automáticamente abrirá/cerrará el drawer cuando la pantalla cambie de tamaño dependiendo de si está en móvil o escritorio
Deshabilita abrir la navegación cuando la ruta cambia
Posiciona el elemento como fixed
Un drawer flotante no tiene un contenedor visible (no hay border-right)
Configura la altura del componente
Oculta el overlay
Aplica la variante del tema light
Condensa el ancho del navigation drawer. También acepta el modificador .sync. Con esto, el drawer re-abrirá cuando se haga click en él
Indica el ancho asignado cuando la prop mini está activa
Configura el breakpoint designado para móviles
El drawer permanece visible independientemente del tamaño de la pantalla
Coloca el navigation drawer a la derecha
Quita toda la funcionalidad del estado automatizado (resize, mobile, route) y manualmente controla el estado del drawer
Un drawer temporal se muestra sobre la aplicación y utiliza un overlay para oscurecer el fondo
Deshabilita la funcionalidad de touch en móviles
Controla la visibilidad
El ancho del contenido
Ejemplos
Colored drawer
Navigation drawers can be customized to fit any application's design. While any component can be used within a drawer, the primary ones you will use are v-list, all of the list children components and v-divider
Permanent floating drawer
A navigation drawer can be placed inside of a card and float over the content background.
Avatars
Since drawers support the v-list component, you can easily create customized dashboard solutions.
Mini
The navigation drawer also has a mini-variant which can be controlled using the prop mini-variant.sync.
Temporary
A temporary drawer sits above its application and uses a scrim (overlay) to darken the background. This drawer behavior is mimicked on the persistent drawer when on mobile. Clicking outside of the drawer will cause it to close.
Dark theme
Vuetify also supports the dark application theme. This will not override components that have default themes so in some cases it will be necessary to manually set the dark theme accents.
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