DropdownDropdown
El componente Dropdown se usa para presentar contenido contextual en un menú emergente y suele combinarse con un componente de menú.
Uso
Importa el componente cuando lo necesites:
import 'mdui/components/dropdown.js';
Importa el tipo TypeScript cuando lo necesites:
import type { Dropdown } from 'mdui/components/dropdown.js';
Uso:
<mdui-dropdown>
<mdui-button slot="trigger">Abrir menú desplegable</mdui-button>
<mdui-menu>
<mdui-menu-item>Elemento 1</mdui-menu-item>
<mdui-menu-item>Elemento 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>Posición de apertura
El atributo placement define la posición de apertura del dropdown.
Forma de activación
El atributo trigger define cómo se activa el dropdown.
Abrir en la posición del cursor
El atributo open-on-pointer abre el dropdown en la posición del cursor. Suele usarse con trigger="contextmenu" para abrir un menú con el botón derecho del ratón.
Mantener el menú abierto al hacer clic
Cuando se usa un menú dentro del dropdown, por defecto, al hacer clic en un elemento del menú, el dropdown se cierra automáticamente. El atributo stay-open-on-click, el dropdown permanecerá abierto al hacer clic en un elemento del menú.
Retraso de apertura/cierre
Cuando trigger="hover", puedes usar open-delay y close-delay para ajustar el retraso de apertura y cierre.
API
Propiedades
| Atributo | Propiedad | Reflect | Tipo | Predeterminado |
|---|---|---|---|---|
open | open | boolean | false | |
Indica si el Dropdown está abierto. | ||||
disabled | disabled | boolean | false | |
Indica si el Dropdown está deshabilitado. | ||||
trigger | trigger | 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string | 'click' | |
Modo de activación del Dropdown, admite múltiples valores separados por espacios. Los valores posibles son:
| ||||
placement | placement | 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'auto' | |
Posición del contenido del Dropdown. Los valores posibles son:
| ||||
stay-open-on-click | stayOpenOnClick | boolean | false | |
Indica si el Dropdown permanece abierto después de hacer clic en | ||||
open-delay | openDelay | number | 150 | |
Retraso para abrir el Dropdown al pasar el ratón, en milisegundos. | ||||
close-delay | closeDelay | number | 150 | |
Retraso para cerrar el Dropdown al pasar el ratón, en milisegundos. | ||||
open-on-pointer | openOnPointer | boolean | false | |
Indica si el Dropdown se abre en la posición del cursor al activarse, a menudo utilizado para abrir menús contextuales del ratón. | ||||
Eventos
| Nombre |
|---|
open |
Se dispara cuando el Dropdown comienza a abrirse. Se puede evitar que se abra llamando a |
opened |
Se dispara cuando la animación de apertura del Dropdown se completa. |
close |
Se dispara cuando el Dropdown comienza a cerrarse. Se puede evitar que se cierre llamando a |
closed |
Se dispara cuando la animación de cierre del Dropdown se completa. |
Slots
| Nombre |
|---|
| (predeterminado) |
Contenido del Dropdown. |
trigger |
Elemento que activa el Dropdown, por ejemplo, un elemento |
CSS Custom Properties
| Nombre |
|---|
--z-index |
Valor CSS |