Tipo 01
Acoplada (docked)
Ocupa todo el ancho, pegada al borde inferior.
Componentes Barras de herramientas
Barras de herramientas
Una barra de herramientas reúne acciones frecuentes de la pantalla actual. En Material 3 puede ir pegada al borde (acoplada) o flotando sobre el contenido.
Uso
Úsala para las acciones que el usuario repite en una pantalla de trabajo: editar texto, dibujar, reproducir.
- Editores (texto, imágenes)
- Pantallas con 3 a 7 acciones frecuentes
- Navegación entre secciones: usa la barra de navegación
- Una sola acción: usa un FAB
Principios
1
Cerca
Las acciones quedan al alcance del pulgar.
2
Contextual
Cambia según lo que se está haciendo.
3
Discreta
Puede esconderse al desplazar.
Tipos
Tipo 02
Flotante
Una píldora que flota sobre el contenido, con FAB opcional.
Tipo 03
Vertical
Flotante a un lado de la pantalla en tablets.
Anatomía
123
- Contenedor
- Íconos de acción
- FAB (opcional, en la flotante)
Comportamiento
- La flotante se esconde al desplazar hacia abajo y vuelve al subir.
- Las acciones pueden cambiar según la herramienta activa.
- Si no caben todas, las menos usadas van a un menú.
Medidas
| Medida | Valor de referencia |
|---|---|
| Alto (acoplada) | 64 dp |
| Alto (flotante) | 64 dp, forma completa |
| Margen de la flotante al borde | 16 dp |
| Íconos | 24 dp, área 48 dp |
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
Rol
role="toolbar" con aria-label.
Teclado
Flechas para moverse entre acciones dentro de la barra.
Nombres
aria-label en cada ícono.