OfimáticaRedes
Resultados
Tipo 01
Con filtros
La capa trasera muestra opciones para filtrar el contenido.
Componentes Fondo en capas (backdrop)
Fondo en capas (backdrop)
El backdrop tiene dos capas: atrás quedan los filtros o la navegación y adelante el contenido. Al bajar la capa delantera se revela la de atrás.
Catálogo de cursos
ProgramaciónOfimáticaRedesDiseño
Ofimática · 3 cursos
Uso
Úsalo cuando el usuario necesita cambiar filtros o secciones sin perder de vista el contenido que está viendo.
- Filtros de un catálogo o de resultados
- Cambiar de sección en apps pequeñas
- Formularios largos en la capa de atrás
- Más de dos capas
Principios
1
Contextual
La capa de atrás siempre se relaciona con la de adelante.
2
Reversible
Se cierra con el mismo botón o tocando la capa delantera.
3
Mantiene el lugar
Al cerrar, el contenido sigue donde estaba.
Tipos
InicioCursosPerfil
Inicio
Tipo 02
Con navegación
La capa trasera funciona como menú de secciones.
Anatomía
OfimáticaRedes
Ofimática · 3 cursos
- Capa trasera
- Encabezado de la capa delantera (subtítulo)
- Capa delantera con el contenido
Comportamiento
Catálogo
ProgramaciónOfimáticaRedes
Ofimática · 3 cursos
- Tocar el ícono de filtros desliza la capa delantera hacia abajo.
- La capa delantera queda visible en parte, para no perder el contexto.
- Tocar de nuevo el ícono, o la capa delantera, la devuelve a su lugar.
Medidas
| Medida | Valor de referencia |
|---|---|
| Capa delantera: radio superior | 16 dp |
| Subtítulo de la capa delantera | 56 dp de alto |
| Espacio visible al revelar | al menos 56 dp de la capa delantera |
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 del botón
aria-expanded indica si la capa trasera está abierta.
Foco
Al abrir, el foco pasa al primer filtro.
Contenido oculto
Lo que queda tapado no debe recibir foco.