Detalles

Son elementos desplegables que incluyen información adicional generalmente en forma de texto.

Índice de apartados de esta página

• Anatomía
• Accesibilidad
• Buenas prácticas

Anatomía #

• Título: Indica el contenido que se va a encontrar.
• Flecha: Indica si el elemento está abierto o cerrado según su posición.
• Contenido: Es libre pudiendo incluir cualquier otro componente.

Accesibilidad #

Cómo funciona #

Dentro de la etiqueta <details> conviven la etiqueta <summary>, que contiene el texto con apariencia de enlace, y el contenido del desplegable.

Qué tener en cuenta #

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

Buenas prácticas #

• El título debe ser explicativo del contenido que se va a desplegar.
• Se recomienda que el título no sea especialmente largo.
• En general se recomiendo que el contenido no incluya interacciones muy complejas, como buscadores, acordeones, otros componentes de detalles, etc. para ello usar Toggles.