Dropdown
Un componente de menú desplegable con animaciones y múltiples opciones de personalización.
import { Dropdown } from "stofli-ui";Un dropdown básico con varias opciones.
Añade íconos a las opciones del dropdown para hacerlas más visuales.
Diferentes variantes de estilo para el dropdown.
El dropdown está disponible en 4 tamaños: pequeño, mediano, grande y extra grande.
Puedes ocultar la flecha del dropdown con la prop showArrow.
Permite seleccionar varias opciones al mismo tiempo con la prop multiSelect.
Puedes crear un dropdown que solo muestre opciones pero no permita seleccionarlas, útil para menús de navegación.
Usa avatares en el dropdown y en sus opciones.
Puedes usar diferentes tamaños de avatar con la prop avatarSize.
Puedes mostrar solo un avatar como botón del dropdown usando avatarOnly={true}. Ideal para menús de usuario compactos.
Puedes controlar dónde aparece el menú desplegable con la prop placement.
Puedes definir un valor seleccionado por defecto.
Puedes definir un ancho fijo para el dropdown usando la prop width.
Usando la prop fullWidth para que el dropdown ocupe todo el ancho disponible.
Puedes deshabilitar opciones específicas del dropdown.
El modo avatarOnly también funciona perfectamente con opciones que tienen avatares. Cuando selecciones una opción con avatar, ese avatar se mostrará en el botón principal automáticamente.
Puedes personalizar cualquier parte del dropdown usando las propiedades de className con clases de Tailwind CSS.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
items | Array<DropdownItem> | - | Lista de elementos del dropdown |
placeholder | string | "Seleccionar..." | Texto a mostrar cuando no hay selección |
variant | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "default" | Variante de estilo |
size | "sm" | "md" | "lg" | "xl" | "md" | Tamaño del dropdown |
radius | "none" | "sm" | "md" | "full" | "md" | Radio de las esquinas |
disabled | boolean | false | Deshabilita todo el dropdown |
fullWidth | boolean | false | Hace que el dropdown ocupe todo el ancho disponible |
width | string | - | Define un ancho específico (ej: "200px", "15rem") |
placement | "bottom" | "top" | "left" | "right" | "bottom" | Posición del menú desplegable |
onChange | (value: string | string[]) => void | - | Función llamada al seleccionar una opción |
icon | ReactNode | - | Ícono a mostrar al inicio del dropdown |
showSelectedIcon | boolean | true | Muestra el ícono de selección en la opción elegida |
defaultValue | string | string[] | - | Valor seleccionado por defecto |
value | string | string[] | - | Valor controlado del dropdown |
className | string | - | Clases adicionales para el contenedor |
buttonClassName | string | - | Clases adicionales para el botón principal |
itemClassName | string | - | Clases adicionales para los elementos de la lista |
arrowIconClassName | string | - | Clases adicionales para el icono de flecha |
dropdownClassName | string | - | Clases adicionales para el menú desplegable |
listClassName | string | - | Clases adicionales para la lista de opciones |
itemContentClassName | string | - | Clases adicionales para el contenedor de cada opción |
itemLabelClassName | string | - | Clases adicionales para el contenedor de la etiqueta de cada opción |
itemIconClassName | string | - | Clases adicionales para los iconos de cada opción |
checkIconClassName | string | - | Clases adicionales para el icono de verificación |
activeColor | string | - | Color para elementos seleccionados (hex: "#f1f5f9" o clases Tailwind: "bg-slate-100 text-white"). Las clases Tailwind en esta propiedad tienen prioridad sobre otras clases como itemClassName. |
showArrow | boolean | true | Muestra u oculta la flecha del dropdown |
multiSelect | boolean | false | Permite seleccionar múltiples opciones |
avatarSize | "xs" | "sm" | "md" | "lg" | "md" | Tamaño de los avatares |
avatarSrc | string | - | URL de la imagen para el avatar del dropdown |
avatarAlt | string | "Avatar" | Texto alternativo para el avatar |
selectable | boolean | true | Si es false, el dropdown muestra hover en las opciones pero no permite seleccionarlas. |
avatarOnly | boolean | false | Si es true, muestra solo el avatar como botón, sin texto ni placeholder. |
id | string | - | ID personalizado para el componente |
label | string | - | Etiqueta descriptiva para el dropdown |
required | boolean | false | Indica si el campo es obligatorio |
aria-label | string | - | Etiqueta ARIA personalizada |
aria-describedby | string | - | ID del elemento que describe el dropdown |
errorMessage | string | - | Mensaje de error a mostrar |
DropdownItem
| Propiedad | Tipo | Descripción |
|---|---|---|
label | ReactNode | Contenido visible de la opción |
value | string | Valor de la opción |
icon | ReactNode | Ícono opcional para la opción |
disabled | boolean | Si la opción está deshabilitada |
avatarSrc | string | URL de la imagen para el avatar |
avatarAlt | string | Texto alternativo para el avatar |
description | string | Descripción adicional para la opción |