Accordion vs. Tabs
Un Accordion abre secciones en una página y puede mantener varias abiertas. Las Tabs muestran una sección a la vez en un mismo espacio compartido.
Usa un acordeón para preguntas o secciones que las personas puedan leer juntas. Usa pestañas para pocas vistas separadas cuando solo una importe a la vez.
Ver lo que hace cada patrón
Prueba cada ejemplo. Luego lea sobre el trabajo para el que fue hecho.
Accordion
Un Accordion apila secciones cuyos encabezados pueden abrir o cerrar su propio contenido.
Accordion
Un Accordion apila secciones cuyos encabezados pueden abrir o cerrar su propio contenido.
Úsalo cuando
Úsalo para secciones opcionales que cada una tiene un encabezado claro y separado.
Una FAQ muestra primero las preguntas. Alguien puede abrir una respuesta sin salirse de la página.
- Úsalo cuando
- Úsalo para secciones opcionales que cada una tiene un encabezado claro y separado.
- No lo uses cuando
- Nunca ocultes información corta y esencial solo para que la página se vea ordenada.
- Nombre usado en código
<details><summary>
Pestañas
Las pestañas usan etiquetas para cambiar el contenido en un panel compartido. La tarea principal permanece abierta.
Resumen, Actividad y Permisos cambian el panel inferior mientras el mismo proyecto permanece abierto.
- Úsalo cuando
- Usa pestañas para unas pocas secciones al mismo nivel cuando sus etiquetas deben permanecer visibles.
- No lo uses cuando
- Nunca uses pestañas como enlaces pequeños a páginas que no tienen relación entre sí.
- Nombre usado en código
role="tablist"
Comparación rápida
| Patrón de UI | Mejor para | No para | Nombre usado en código |
|---|---|---|---|
| AccordionAccordion | Úsalo para secciones opcionales que cada una tiene un encabezado claro y separado. | Nunca ocultes información corta y esencial solo para que la página se vea ordenada. | <details><summary> |
| PestañasTabs | Usa pestañas para unas pocas secciones al mismo nivel cuando sus etiquetas deben permanecer visibles. | Nunca uses pestañas como enlaces pequeños a páginas que no tienen relación entre sí. | role="tablist" |
Antes de lanzarlo
- 01
Escribe lo que la persona necesita hacer.
- 02
Probar el teclado, enfoque, tacto, zoom, carga, estados vacíos y de error.
- 03
Asegurarse de que las personas puedan obtener la misma información sin pasar el cursor o movimiento.
- 04
Probar con contenido real en pantallas pequeñas y grandes.
Petición de comparación que puedes copiar
Copia esto cuando tu equipo necesite ayuda para elegir entre los patrones.
Elige el mejor patrón de Accordion (Accordion), Pestañas (Tabs) para nuestro flujo de usuario real. Usa esta regla: Un Accordion abre secciones en una página y puede mantener varias abiertas. Las Tabs muestran una sección a la vez en un mismo espacio compartido. Anota la tarea, la cantidad de contenido y el costo de detener el flujo. Comprueba el teclado, toque, carga, errores y movimiento reducido. Explica tu elección y luego crea la versión accesible más pequeña usando el sistema de diseño del proyecto.