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.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Applique position: absolute au composant.
Indique le composant comme partie de la mise en page de l'application. Utilisé pour ajuster dynamiquement la taille du contenu. Les composants utilisant cette prop devraient résider en extérieur du composant v-main pour fonctionner correctement. Vous pouvez obtenir plus d'informations sur les mises en page sur la application page. Note: cette prop applique automatiquement position: fixed à l'élément de mise en page. Vous pouvez écraser cette fonctionnalité en utilisant la prop absolute
Expands from the bottom of the screen on mobile devices
A clipped drawer rests under the application toolbar
Applique la couleur spécifiée à la commande - cela peut être le nom de la couleur matérielle (par exemple success ou purple) ou la couleur css (#033 ou rgba(255, 0, 0, 0.5)). Vous pouvez trouver la liste des classes construites dans la page couleurs.
Applique la variante du thème foncé au composant. Vous pouvez trouver plus d'informations sur la documentation Material Design pour thèmes sombres.
Will automatically open/close drawer when resized depending if mobile or desktop.
Disables opening of navigation drawer when route changes
Collapses the drawer to a mini-variant until hovering with the mouse
Applique position: fixed au composant.
A floating drawer has no visible container (no border-right)
Sets the height of the navigation drawer
Masque l’affichage de la superposition.
Applique la variante claire du thème au composant.
Condenses navigation drawer width, also accepts the .sync modifier. With this, the drawer will re-open when clicking it
Designates the width assigned when the mini prop is turned on
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.
Définit la couleur de superposition.
Définit l'opacité de la superposition.
The drawer remains visible regardless of screen size
Places the navigation drawer on the right
Specifies a v-img as the component's background.
Remove all automated state functionality (resize, mobile, route) and manually control the drawer state
Spécifiez un tag personnalisé utilisé sur l'élément racine.
A temporary drawer sits above its application and uses a scrim (overlay) to darken the background
Disable mobile touch functionality
Contrôle si le composant est visible ou caché.
Définit la largeur du composant.
A slot at the bottom of the drawer
L'emplacement par défaut de 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
Le modèle lié mis à jour
booleanEmits event object when transition is complete.
objectThe mini-variant.sync event
boolean1px !default;16 !default;Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
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.
By default, a navigation drawer has a 1px right border that separates it from content. In this example we want to detach the drawer from the left side and let it float on its own. The floating property removes the right border (or left if using right).
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.
A temporary drawer sits above its application and uses a scrim (overlay) to darken the background. This drawer behavior is mimicked by default when on mobile. Clicking outside of the drawer will cause it to close.
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.
Prêt pour plus ? Continuez la lecture avec :