Desplegable
Utilice el componente desplegable para permitir que el usuario seleccione un elemento de una colección que se muestra tras la interacción del usuario en una lista desplazable. Solo se puede seleccionar un elemento a la vez y si tu escenario requiere la selección de varios elementos, debes usar el Combo en su lugar. El menú desplegable es visualmente idéntico a la Ignite UI for Angular
Dropdown Demo
Display Density
El menú desplegable viene en tres variantes de densidad de pantalla: Cómodo, Acogedor y Compacto.
Items
El menú desplegable admite dos tipos de elementos, encabezado y elemento. A través de encabezados es posible organizar los demás elementos en grupos.
Item States
Los elementos desplegables admiten seis estados diferentes: inactivo, deshabilitado, enfocado, seleccionado, seleccionado y enfocado y seleccionado y deshabilitado. En Figma los estados son diferentes variantes que se pueden cambiar desde la propiedad State
. En Sketch esto se logra con Symbol Overrides
, mientras que en Adobe XD utilizamos el paradigma Component States
para permitirle cambiar fácilmente entre estados.
Item Layout Template
El elemento desplegable admite plantillas flexibles de iconos y etiquetas. En Figma, para mostrar el ícono, debe seleccionar uno o todos los elementos en su menú desplegable y activar la propiedad Prefix Icon
. En Sketch, para mostrar el ícono, debe configurar su anulación en Icono/Medio y las reglas de diseño inteligente ajustarán el diseño del elemento automáticamente. En Adobe XD, lo mismo es posible haciendo visible la capa de íconos y dejando que la pila ajuste el diseño automáticamente; sin embargo, si no necesita elementos con íconos en el contenido, simplemente elimine la capa de íconos.
Estilismo
El menú desplegable viene con flexibilidad de estilo para su color de fondo, así como varias opciones relacionadas con los elementos que contiene, como el fondo del elemento y el encabezado y los colores del texto.
Usage
Cuando utilice el menú desplegable, siempre debe mostrarlo encima del contenido que sigue al elemento que activa su visualización. Los menús desplegables no envían contenido como lo haría un panel de expansión.
Hacer | No |
---|---|
Additional Resources
Temas relacionados:
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.