DESY

Sistema de Diseño del Gobierno de Aragón.

Desplegable

Es un componente que nos permite desplegar un contenedor de contenido para realizar otras acciones.

Índice de apartados de esta página

Anatomía

La composición de este elemento consiste en una etiqueta de texto, un icono flecha y el contenedor. En general, el contenido que se muestra dentro del contenedor es libre. Se puede emplear para múltiples propósitos.

En cuanto a tipos y tamaños, heredan las mismas especificaciones de los botones. Además, un desplegable puede convivir en una barra de acciones con otros botones, por lo que es conveniente mantener una apariencia y semántica coherente con el grupo en el que se encuentra.

Accesibilidad

Cómo funciona

Etiqueta button con un aria-haspopup=true y un aria-expanded que cambia a true o false según si el contenedor está desplegado o no.

Cuando el primer item recibe el foco, la persona puede abrir el contenedor accionado la tecla enter/espacio.

Qué tener en cuenta

Todos los atributos de accesibilidad se encuentran por defecto en la configuración del componente.

Diferencias entre componentes

Existen varios componentes que tienen una apariencia y funcionamiento similar, aunque deben usarse uno u otro dependiendo de la finalidad y el contexto.

  1. 1
  2. 2

    Desplegable

  3. 3

    Listado en caja

    • Opción 1
    • Opción 2
    • Opción 3
    • Opción 4
    • Opción 5
  4. 4
  5. 5

    Barra de menús

  1. 1
    Selector. Se usa específicamente en formularios, tienen una apariencia y tamaño alineado con los inputs.
  2. 2
    Desplegable. Es un componente que despliega un contenedor genérico en el que puede incluirse cualquier otro componente.
  3. 3
    Listado en caja. Se usa para hacer un listado de opciones.
  4. 4
    Menú de navegación. Se usan específicamente para navegar en la aplicación, puede tener varias apariencias según el contexto.
  5. 5
    Barra de menús. Genera cambios en otro sitio de la página, pero no navega a otro sitio diferente. Se pueden seleccionar múltiples opciones y agruparlas de distintas maneras. Por ejemplo para filtros.