Menu
El componente v-menumuestra un menú en la posición del elemento que se usa para activarlo.
API
Posiciona el elemento como absolute
Denota un activador personalizado para cuando el slot activador no se utiliza. String puede ser cualquier querySelector válido y Object puede ser cualquier Node válido.
Quita el reposicionamiento overflow para el componente.
Especifica de cuál elemento del DOM debe soltarse este componente. Utiliza ya sea un selector de CSS o una referencia del objeto que apunta al elemento.
Centra la lista en el elemento seleccionado
Alínea el componente hacia abajo
Los milisegundos a esperar antes de cerrar el componente.
Indica si el menú debe cerrar al hacer click afuera del activator
Indica si el menú debe cerrarse cuando se hace click en su contenido
Aplica una clase personalizada al elemento que se soltó. Esto es útil porque el contenido se mueve al final de la app y no puede ser alcanzable por las clases que se pasan directamente al componente.
Components.Menus.
Components.Menus.
Deshabilita el menú
Posiciona el elemento como fixed
Obliga a un ancho de 100%
Components.Menus.
Renderiza el contenido condicionalmente en el lifecycle hook mounted. Sólo renderizará el contenido si es activado.
Alínea el componente hacia la izquierda
Components.Menus.
Configura la altura máxima para el contenido
Configura el ancho máximo para el componente.
Configura el ancho mínimo para el componente.
Empujar el contenido hasta la parte de abajo.
Nudge the content to the left
Nudge the content to the right
Nudge the content to the top
Nudge the content width
Causes the component to flip to the opposite side when repositioned due to overflow
Desplaza el menú en el eje x. Funciona en conjunto con la dirección left/right
Desplaza el menú en el eje y. Funciona en conjunto con la dirección _top/bottom/
Los milisegundos a esperar antes de abrir el componente.
Indica si el menú debe abrirse al hacer click en el activator
Indica si el menú debe abrirse al pasar el mouse por encima del activator
Configura el origen de la transición
Used to position the content when not using an activator slot
Used to position the content when not using an activator slot
Components.Menus.
Alínea el componente hacia la derecha
Alínea el componente hacia arriba
Configura la transición del componente. Puede ser una de las transiciones prefabricadas o una propia.
Controla la visibilidad
The z-index used for the component
Ejemplos
Absolute position
Menus can also be placed absolutely on top of the activator element using the absolute prop. Try clicking anywhere on the image.
Absolute position without activator
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.
Menu with activator and tooltip
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.
Hover
Menus can be accessed using hover instead of clicking with the open-on-hover prop.
Menus
Menus can be placed within almost any component.
Custom transitions
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.
Popover menu
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.