The v-menu component shows a menu at the position of the element used to activate it.
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.
Désigne un activateur personnalisé lorsque le champ activator n'est pas utilisé. La chaîne de caractères peut être n'importe quel querySelector valide et Object peut être n'importe quel nœud valide.
Supprime le dépassement de repositionnement pour le contenu
Spécifie l'élément DOM auquel ce composant doit détacher.String peut être n'importe quel querySelector et Object valide peut être un noeud valide. Cela attachera au composant racine v-app par défaut.
Centre la liste sur l'élément sélectionné
Aligne le composant vers le bas.
Milliseconds to wait before closing component. Only works with the open-on-hover prop
Designates if menu should close on outside-activator click
Designates if menu should close when its content is clicked
Applique une classe personnalisée à l'élément détaché. Cela est utile parce que le contenu est déplacé au début du composant v-app (sauf si le prop attach est fourni) et n'est pas ciblable par les classes passées directement sur le composant.
Applique la variante du thème foncé au composant. Vous pouvez trouver plus d'informations sur la documentation Material Design pour thèmes sombres.
Removes all keyboard interaction
Disables the menu
Force le contenu des composants à effectuer le rendu sur les composants montés. Ceci est utile si vous avez du contenu qui ne sera pas rendu dans le DOM que vous voulez explorer pour le référencement.
Applique position: fixed au composant.
Détache le contenu du menu à l'intérieur du composant par opposition au document.
Aligne le composant vers la gauche.
Applique la variante claire du thème au composant.
Sets the max height of the menu content
Définit la largeur maximale du contenu
Définit la largeur minimale du contenu
Décale le contenu vers le bas
Décale le contenu vers la gauche
Décale le contenu vers la droite
Décale le contenu vers le haut
Modifie la largeur du contenu
Provoque le basculement du composant sur le côté opposé lors du repositionnement en raison du débordement
Offset the menu on the x-axis. Works in conjunction with direction left/right
Offset the menu on the y-axis. Works in conjunction with direction top/bottom
Milliseconds to wait before opening component. Only works with the open-on-hover prop
Designates whether menu should open on activator click
Designates whether menu should open on activator hover
Définit l'origine de la transition sur l'élément. Vous pouvez trouver plus d'informations sur la documentation MDN pour l'origine de la transition.
Utilisé pour positionner le contenu sans utiliser le slot d'activation
Utilisé pour positionner le contenu sans utiliser le slot d'activation
The value that is updated when the menu is closed - must be primitive. Dot notation is supported
Aligne le composant vers la droite.
Designates the border-radius applied to the component. You can find more information on the Border Radius page.
Removes the component's border-radius.
Aligner le contenu vers le haut.
Définit la transition du composant. Peut être l'une des construites en transitions ou l'autre de vos propres.
Contrôle si le composant est visible ou caché.
Le z-index utilisé pour le composant
Lorsqu'il est utilisé, activera le composant lorsque vous cliquez dessus (ou passez la souris sur certains composants). Cela arrête manuellement la propagation de l'événement. Sans ce slot, si vous ouvrez le composant via son modèle, vous devrez arrêter manuellement la propagation de l'événement
{
attrs: { role: string, aria-haspopup: boolean, aria-expanded: string }
on: { [eventName]: eventHandler }
value: boolean
}L'emplacement par défaut de vue.
$border-radius-root !default;8 !default;Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Menus can also be placed absolutely on top of the activator element using the absolute prop. Try clicking anywhere on the image.
With the new v-slot syntax, nested activators such as those seen with a v-menu and v-tooltip attached to the same activator button, need a particular setup in order to function correctly. Note: this same syntax is used for other nested activators such as v-dialog w/ v-tooltip.
Menus can be accessed using hover instead of clicking with the open-on-hover prop.
Vuetify comes with 3 standard transitions, scale, slide-x and slide-y. You can also create your own and pass it as the transition argument. For an example of how the stock transitions are constructed, visit here.
You can disable the menu. Disabled menus can't be opened.
Menu can be offset by the X axis to make the activator visible.
Menu can be offset by the Y axis to make the activator visible.
Menus can have their border-radius set by the rounded prop. Additional information about rounded classes is on the Border Radius page.
Menu can be closed when lost focus.
You can configure whether v-menu should be closed when its content is clicked.
Menus can also be used without an activator by using absolute together with the props position-x and position-y. Try right-clicking anywhere on the image.
Menus can be placed within almost any component.
A menu can be configured to be static when opened, allowing it to function as a popover. This can be useful when there are multiple interactive items within the menu contents.
By default, v-menu components are detached and moved to the root of your application. In order to properly support inserting dynamic content into the DOM, you must use the attach prop. This will ensure that focus transfers from the activator to the content when pressing the tab key.
Prêt pour plus ? Continuez la lecture avec :