## Dropdown Menú conmutable para visualizar listas de enlaces y acciones. ### Uso básico Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones. :::demo El elemento desencadenante se representa con el slot predeterminado, y la parte desplegable se representa con el slot llamado dropdown. Por defecto, la lista desplegable se muestra cuando se pasa el ratón por encima del elemento desencadenante sin necesidad de hacer clic en él. ```html Dropdown List Action 1 Action 2 Action 3 Action 4 Action 5 ``` ::: ### Elemento detonante Utilizando un botón para activar la lista desplegable. :::demo Utilice `split-button` para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonación. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro. ```html Dropdown List Action 1 Action 2 Action 3 Action 4 Action 5 Dropdown List Action 1 Action 2 Action 3 Action 4 Action 5 ``` ::: ### Cómo detonar el evento Haga clic en el elemento detonante o sobre él. :::demo Utilice el atributo `trigger`. Por defecto, es `hover`. ```html hover to trigger Dropdown List Action 1 Action 2 Action 3 Action 4 Action 5 click to trigger Dropdown List Action 1 Action 2 Action 3 Action 4 Action 5 ``` ::: ### Ocultamiento del menú Use `hide-on-click` para definir si el menú se cierra al hacer clic. :::demo El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando `hide-on-click` como false. ```html Dropdown List Action 1 Action 2 Action 3 Action 4 Action 5 ``` ::: ### Evento command Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro es asignado por cada elemento. :::demo ```html Dropdown List Action 1 Action 2 Action 3 Action 4 Action 5 ``` ::: ### Tamaños Además del tamaño predeterminado, el componente Dropdown proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios :::demo Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`. ```html Default Action 1 Action 2 Action 3 Action 4 Medium Action 1 Action 2 Action 3 Action 4 Small Action 1 Action 2 Action 3 Action 4 Mini Action 1 Action 2 Action 3 Action 4 ``` ::: ### Dropdown atributos | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | ------------- | ---------------------------------------- | ------- | ---------------------------------------- | ----------- | | type | tipo de botón de menú, consulte Componente`Button`, sólo funciona cuando `split-button` es true. | string | — | — | | size | tamaño del menú, también funciona en `split-button` | string | medium / small / mini | — | | split-button | si se visualiza un grupo de botones | boolean | — | false | | placement | colocación del menú | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end | | trigger | cómo detonar | string | hover/click | hover | | hide-on-click | si se oculta el menú después de hacer clic en el elemento | boolean | — | true | | show-timeout | Tiempo de retardo antes de mostrar un dropdown (solamente trabaja cuando se dispara `hover`) | number | — | 250 | | hide-timeout | Tiempo de retardo antes de ocultar un dropdown (solamente trabaja cuando se dispara `hover`) | number | — | 150 | | tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Dropdown | number | — | 0 | ### Dropdown Slots | Nombre | Descripción | |------|--------| | — | contenido del Dropdown. Aviso: Debe ser un elemento html dom válido (ej. `,