Tipo 01
Cerrado
Un FAB normal.
Componentes Menú del FAB
Menú del FAB
El menú del FAB abre, desde el botón flotante, una lista de 2 a 6 acciones relacionadas con texto e ícono.
Uso
Úsalo cuando la acción principal de la pantalla tiene variantes: crear un correo, un evento o una foto.
- Variantes de la acción de crear
- 2 a 6 acciones relacionadas
- Una sola acción: usa un FAB normal
- Acciones sin relación entre sí
Principios
1
Del FAB
Nace del botón flotante y vuelve a él.
2
Con texto
Cada opción lleva ícono y nombre.
3
Breve
Pocas opciones, todas a la vista.
Tipos
Tipo 02
Abierto
El FAB se convierte en cerrar y aparecen las opciones.
Anatomía
1234
- FAB (se convierte en cerrar)
- Elementos de la lista
- Ícono de cada elemento
- Texto de cada elemento
Comportamiento
- El ícono del FAB gira y se convierte en una X.
- Las opciones aparecen escalonadas de abajo hacia arriba.
- Elegir una opción o tocar fuera cierra el menú.
Medidas
| Medida | Valor de referencia |
|---|---|
| FAB | 56 dp |
| Elementos | 56 dp de alto, forma completa |
| Espacio entre elementos | 4 dp |
| Opciones | 2 a 6 |
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
Estado
aria-expanded en el FAB.
Menú
role="menu" o una lista de botones.
Esc
Cierra y devuelve el foco al FAB.