Sistema de diseño
Dropdown menu
Es un componente de interfaz de usuario que permite a los usuarios seleccionar una opción de una lista de opciones desplegables.
Figma
Storybook
AEM
Overview
El menú desplegable debe seguir el estilo visual general del sistema de diseño, utilizando colores, tipografía y estilos que se alineen con las pautas de diseño establecidas.
Debe mostrarse y ocultarse de manera fluida, generalmente en respuesta a la acción del usuario, como al hacer clic en un botón o enlace.
Permite a los usuarios seleccionar una opción de una lista de alternativas. Las opciones pueden incluir texto simple, iconos o una combinación de ambos, según el diseño.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
En Oxygen, el menú desplegable está disponible en dos tamaños. El equipo de diseño seleccionará la variante más adecuada en función de la ubicación y el contexto de la interfaz.
Tamaños
A la izquierda tenemos el tamaño Medium la variante por defecto que aparece en Oxygen. A la derecha mostramos la variante Small, variante optimizada que suele utilizarse en pantallas donde se quiere optimizar el espacio vertical.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Dentro de la configuración de este componente encontramos varias opciones:
Actions
El componente tiene la opción de añadir acciones al final del scroll, por si fuera necesario hacer una sola llamada al servidor.
Estado de los fragmentos del Dropdown
Nombre
Descripción / Uso
Ejemplo
Default
Hover
Focus
Active
Opciones de los fragmentos del Dropdown
Nombre
Descripción / Uso
Ejemplo
Default
Sólo texto por defecto para indicar el elemento seleccionable del listado
Detail
Texto detalle complementario que aporta contexto y complementa la información
Checkbox
En los listados que pueden tener múltiple selección es importante que aparezca un checkbox
Icon
Elemento gráfico que puede aparecer al lado del texto para ayudar a la comprensión del mismo
Behaviour
Max length detail
El detalle puede ocupar hasta 2 líneas; si es necesario, se aplicará una elipsis. Se recomienda que los detalles sean breves.
Actions
Cuando el Dropdown menu incluye acciones, puede presentar una combinación de un link + botón, o un botón secundario + botón primario. Tiene un máximo de 2 acciones.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes