Tipo 01
Fijas
Todas visibles y del mismo ancho.
Componentes Pestañas
Pestañas
Las pestañas organizan contenido relacionado en vistas del mismo nivel, y permiten cambiar entre ellas sin salir de la pantalla.
Contenido
Unidades 1 a 4: HTML, CSS, diseño responsive y JavaScript.
Talleres
3 talleres entregados, 1 pendiente.
Notas
Promedio parcial: 4,2.
Uso
Úsalas para dividir contenido del mismo nivel en grupos que el usuario alterna: secciones de un curso, tipos de resultado.
- 2 a 6 vistas relacionadas del mismo nivel
- Alternar sin perder el contexto
- Pasos de un proceso en orden: usa un asistente (stepper)
- Navegación principal de la app
Principios
1
Relacionadas
Todas las pestañas hablan del mismo tema.
2
Paralelas
Ninguna es más importante que otra.
3
Visibles
La activa siempre está resaltada.
Tipos
Tipo 02
Desplazables
Muchas pestañas que se deslizan horizontalmente.
Tipo 03
Con íconos
Ícono y texto, o solo ícono.
Anatomía
- Contenedor
- Pestaña activa
- Indicador de la activa
- Pestaña inactiva
- Divisor inferior
Comportamiento
Contenido
Talleres
Notas
- El indicador se desliza a la nueva pestaña.
- En celular también se cambia de pestaña deslizando el contenido.
- Con teclado: flechas para moverse entre pestañas.
Medidas
| Medida | Valor de referencia |
|---|---|
| Alto (solo texto) | 48 dp |
| Alto (ícono y texto) | 72 dp |
| Indicador | 2 dp de alto |
| Ancho de pestaña | mín. 90 dp, máx. 360 dp |
| Texto | 14 sp, mayúsculas en M2 |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Roles
role="tablist", "tab" y "tabpanel".
Estado
aria-selected="true" en la activa.
Relación
aria-controls une cada pestaña con su panel.