Pestañas vs. Control Segmentado
Las pestañas cambian entre secciones de contenido. Un control segmentado cambia un modo, filtro o valor pequeño en la misma vista.
Usa pestañas para secciones de contenido separadas. Usa un control segmentado para unas pocas opciones cortas que cambian el mismo contenido.
Ver lo que hace cada patrón
Prueba cada ejemplo. Luego lea sobre el trabajo para el que fue hecho.
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"
Grupo de alternancia
Un grupo etiquetado de botones que se activan o desactivan. Una o más opciones separadas pueden quedarse presionadas.
Un editor de texto deja activados la Negrita y la Cursiva al mismo tiempo. Cada botón indica si está pulsado.
- Úsalo cuando
- Úselo para unos pocos modos pequeños y reversibles cuyos estados actuales deben permanecer visibles.
- No lo uses cuando
- Usa botones de opción cuando exactamente se pueda enviar una sola elección. Usa casillas de verificación para elecciones normales del formulario.
- Nombre usado en código
button[aria-pressed] in a labeled group
Comparación rápida
| Patrón de UI | Mejor para | No para | Nombre usado en código |
|---|---|---|---|
| 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" |
| Grupo de alternanciaToggle Group | Úselo para unos pocos modos pequeños y reversibles cuyos estados actuales deben permanecer visibles. | Usa botones de opción cuando exactamente se pueda enviar una sola elección. Usa casillas de verificación para elecciones normales del formulario. | button[aria-pressed] in a labeled group |
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 Pestañas (Tabs), Grupo de alternancia (Toggle Group) para nuestro flujo de usuario real. Usa esta regla: Las pestañas cambian entre secciones de contenido. Un control segmentado cambia un modo, filtro o valor pequeño en la misma vista. 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.