Tipo 01
Completo
Ocupa todo el ancho.
Componentes Divisores
Divisores
Un divisor es una línea fina que separa contenido en grupos. Ordena sin agregar peso visual.
A
Ana GómezProgramación III
L
Luis PérezBases de Datos I
S
Sara RuizFundamentos Web
Uso
Úsalos para separar grupos de contenido cuando el espacio en blanco no es suficiente: elementos de una lista, secciones de un menú.
- Separar elementos densos en una lista
- Agrupar opciones de un menú
- Entre todo: si ya hay espacio o tarjetas, sobra
- Como decoración
Principios
1
Sutiles
Una línea de 1 dp en gris claro.
2
Agrupadores
Separan grupos, no cada elemento por obligación.
3
Alineados
Empiezan donde empieza el texto, si la lista tiene íconos.
Tipos
Tipo 02
Con sangría
Empieza alineado con el texto (72 dp en listas con avatar).
Tipo 03
Central
Deja margen a ambos lados.
Tipo 04
Vertical
Separa elementos en una fila, como acciones de una barra.
Anatomía
A
Ana Gómez
L
12Luis Pérez
- Línea divisoria
- Sangría (opcional)
Comportamiento
A
Ana GómezEstudiante
L
Luis PérezEstudiante
S
Sara RuizEstudiante
- Los divisores no son interactivos.
- En listas que se reordenan, el divisor se mueve con su elemento.
- Si quitas los divisores, aumenta el espacio entre elementos para no perder la separación.
Medidas
| Medida | Valor de referencia |
|---|---|
| Grosor | 1 dp |
| Color | negro al 12% |
| Sangría en listas con avatar | 72 dp |
| Margen del divisor central | 16 dp por lado |
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
Decorativo u ordenador
Usa
si separa secciones con sentido; si es decoración, un borde de CSS.
Sin depender de él
Los grupos deben entenderse también por sus títulos.
Contraste
Al ser decorativo, no necesita contraste mínimo.