The v-menu component shows a menu at the position of the element used to activate it.
Wählen Sie unten Ihren gewünschte Komponente aus und sehen Sie die verfügbaren Attribute, Slots, Ereignisse und Funktionen.
Wendet den Style position: absolute auf einer Komponente an.
Legen Sie einen benutzerdefinierten Aktivator fest, wenn der activator-Slot nicht verwendet wird. String kann ein beliebiger gültiger querySelector sein und das Objekt kann ein beliebiger gültiger Knoten sein.
Entfernt Überlauf-Neupositionierung für den Inhalt
Gibt an, zu welchem DOM-Element diese Komponente sich trennen soll. String - Kann jeder gültige QuerySelector sein. Objekt - Lann jeder gültige Knoten sein. Dies wird standardmäßig an den Root-v-app Component anhängt.
Zentriert die Liste auf dem selektierten Element
Legt die Komponente nach unten aus.
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
Wendet eine benutzerdefinierte Klasse auf das abgelöste Element an. Dies ist nützlich, da der Inhalt an den Anfang der v-app Komponente verschoben wird (es sei denn, das attach Prop wird bereitgestellt) und nicht zielgerichtet von Klassen ist, die direkt auf die Komponente übergeben werden.
Wendet die dunkle Theme-Variante für die Komponente an. Mehr Informationen zur Material Design Dokumentation für dunkle Themes.
Removes all keyboard interaction
Disables the menu
Erzwingt den Inhalt der Komponenten unter mount gezeichnet zu werden. Dies ist nützlich, wenn Sie Inhalte haben, die nicht im DOM dargestellt werden, aber für SEO crawlebar sein soll.
Wendet den Style position: fixed auf einer Komponente an.
Detaches the menu content inside of the component as opposed to the document.
Legt die Komponente nach links aus.
Wendet die helle Theme-Variante für die Komponente an.
Sets the max height of the menu content
Legt die maximale Breite für den Inhalt fest
Legt die minimale Breite für den Inhalt fest
Schiebe den Inhalt nach unten
Schiebe den Inhalt nach links
Schiebe den Inhalt nach rechts
Schiebe den Inhalt nach oben
Stoße die Breite an
Bewirkt, dass die Komponente durch Überlauf auf die gegenüberliegende Seite gedreht wird
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
Legt den Übergangspunkt des Elements fest. Mehr Informationen bezüglich des Herkunfts-Übergangs finden Sie in der MDN-Dokumentation.
Wird verwendet, um den Inhalt zu positionieren, wenn kein Aktivierungs-Slot verwendet wird
Wird verwendet, um den Inhalt zu positionieren, wenn kein Aktivierungs-Slot verwendet wird
The value that is updated when the menu is closed - must be primitive. Dot notation is supported
Legt die Komponente nach rechts aus.
Designates the border-radius applied to the component. You can find more information on the Border Radius page.
Removes the component's border-radius.
Legt die Komponente nach oben aus.
Legt den Komponenten-Übergang fest. Kann einer der eingebauten Übergänge oder ein eigener sein.
Legt fest, ob die Komponente sichtbar oder versteckt ist.
Der z-Index für die Komponente
Bei Verwendung wird die Komponente aktiviert, wenn Sie darauf klicken (oder für bestimmte Komponenten den Mauszeiger darüber bewegen). Dadurch wird die event propagation manuell gestoppt. Wenn Sie die Komponente ohne diesen slot über ihr Modell öffnen, müssen Sie die event propagation manuell stoppen
{
attrs: { role: string, aria-haspopup: boolean, aria-expanded: string }
on: { [eventName]: eventHandler }
value: boolean
}Der Standard-Vue Slot.
$border-radius-root !default;8 !default;Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
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.
Bereit für mehr? Weiter lesen mit: