Tipo 01
Estándar
Se abre al lado y el contenido se hace más angosto.
Componentes Hojas laterales
Hojas laterales
Una hoja lateral es un panel que aparece desde el borde derecho con contenido o herramientas complementarias.
Catálogo
Uso
Úsala en tablets y escritorio para filtros, detalles de un elemento o herramientas de edición, sin perder de vista el contenido principal.
- Filtros en pantallas anchas
- Detalles o propiedades de un elemento seleccionado
- Celular: allí usa una hoja inferior o pantalla completa
- Contenido principal
Principios
1
Complementaria
Ayuda con lo que está en la pantalla principal.
2
Lateral
Aparece a la derecha en idiomas de izquierda a derecha.
3
Ajustable
Puede empujar el contenido o ir encima.
Tipos
Tipo 02
Modal
Va encima del contenido con un fondo oscuro.
Anatomía
1324
- Contenedor
- Encabezado con título
- Botón de cerrar
- Contenido
Comportamiento
Catálogo
- La hoja estándar empuja el contenido; la modal lo cubre.
- Se cierra con su botón, con Esc o tocando el fondo (modal).
- En celular se convierte en pantalla completa.
Medidas
| Medida | Valor de referencia |
|---|---|
| Ancho | 256 a 400 dp aprox. |
| Margen interno | 24 dp |
| 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
Botón que la abre
aria-expanded y aria-controls.
Modal
Foco atrapado y Esc para cerrar.
Título
Encabezado claro: "Filtros".