Modales y Overlays
Dropdown
Un menú que aparece al hacer clic, mostrando una lista de acciones u opciones construidas con SDropdownItem.
Tests
73%
Uso
SDropdown proporciona un menú activado por clic, construido sobre SPopover y el componente Menu de HeadlessUI. Usa SDropdownItem para cada entrada del menú.
El slot #reference define el contenido del botón disparador. El slot por defecto acepta componentes SDropdownItem.
Posición
Usa la prop placement para controlar dónde aparece el menú desplegable relativo al disparador.
Con Iconos
SDropdownItem soporta una prop icon que acepta un FunctionalComponent. Usa el slot #description para agregar texto secundario debajo de la etiqueta del item.
Items Deshabilitados
Establece la prop disabled en SDropdownItem para prevenir la interacción con elementos específicos del menú.
Props de SDropdown
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
placement | Placement | 'bottom-start' | Posición del menú desplegable relativo al disparador |
arrow | 'auto' | 'light' | 'dark' | - | Muestra una flecha que apunta al disparador |
offset | number | 0 | Distancia en píxeles entre el disparador y el menú |
static | boolean | false | Desactiva el volteo automático cuando el menú se desbordaría del viewport |
responsive | boolean | true | En móvil, se muestra como una hoja inferior en lugar de un panel flotante |
preventClose | boolean | false | Previene que el dropdown se cierre cuando el foco sale |
preventFocus | boolean | false | Previene el foco automático en el menú al abrirse |
referenceClass | string | - | Clases CSS adicionales para el botón disparador |
floatingClass | string | - | Clases CSS adicionales para el contenedor del menú flotante |
manual | boolean | - | Desactiva la apertura/cierre automático al hacer clic. Usa los métodos expuestos para control manual |
class | string | - | Clases CSS adicionales para el elemento raíz |
Props de SDropdownItem
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
icon | FunctionalComponent | - | Componente de icono mostrado antes de la etiqueta |
disabled | boolean | - | Deshabilita el elemento del menú |
link | string | - | Renderiza el item como un enlace (<a>) con este href |
class | string | - | Clases CSS adicionales para el item |
labelClass | string | - | Clases CSS adicionales para el texto de la etiqueta |
iconClass | string | - | Clases CSS adicionales para el icono |
Eventos
| Evento | Payload | Descripción |
|---|---|---|
close | - | Se emite cuando el dropdown se cierra |
Slots
SDropdown
| Nombre | Descripción |
|---|---|
reference | Contenido del botón disparador |
default | Elementos del menú (componentes SDropdownItem) |
SDropdownItem
| Nombre | Descripción |
|---|---|
default | Texto de la etiqueta del item |
description | Texto descriptivo secundario debajo de la etiqueta |