Reproduciendo
Tipo 01
Estándar
Convive con el contenido; ambos se pueden usar.
Componentes Hojas inferiores
Hojas inferiores
Una hoja inferior es un panel que sube desde abajo con contenido o acciones adicionales.
Compartir con
Uso
Úsala en celular para mostrar acciones u opciones relacionadas con la pantalla, sin cambiar de pantalla.
- Opciones de compartir o exportar
- Detalles complementarios (como en un mapa)
- Mensajes críticos: usa un diálogo
- Navegación principal
Principios
1
Cercana
Sale desde donde está el pulgar.
2
Complementaria
Su contenido depende de la pantalla actual.
3
Descartable
Se cierra deslizando hacia abajo.
Tipos
Compartir
Tipo 02
Modal
Bloquea el contenido detrás con un fondo oscuro.
Carrito · 3 productos
Tipo 03
Expandible
Empieza pequeña y se arrastra hasta pantalla completa.
Anatomía
Compartir con
- Contenedor
- Agarradera (opcional)
- Contenido
- Fondo oscurecido (modal)
Comportamiento
Compartir con
- Entra deslizándose desde el borde inferior.
- Se puede cerrar deslizando hacia abajo, tocando el fondo o con Esc.
- Una hoja expandible se arrastra para ocupar más pantalla.
Medidas
| Medida | Valor de referencia |
|---|---|
| Radio superior | 4 a 16 dp |
| Agarradera | 32 × 4 dp |
| Margen interno | 16 dp |
| Altura máxima inicial | mitad de la pantalla |
| Elevación (modal) | 16 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
Modal
role="dialog" y foco atrapado.
Cierre accesible
Además de deslizar, un botón o Esc.
Título
Nombra la hoja con aria-label o un encabezado.