- Inicio
- Cursos
- Perfil
Tipo 01
Una línea
Solo el texto principal.
Componentes Listas
Listas
Una lista presenta elementos del mismo tipo en una columna, uno debajo del otro, para leerlos o elegir uno.
Uso
Úsalas para colecciones de texto o elementos simples: contactos, archivos, configuraciones, estudiantes.
- Elementos similares que se leen en orden
- Menús de configuración
- Contenido muy visual: usa listas de imágenes o tarjetas
- Datos con varias columnas: usa una tabla
Principios
1
Lógicas
Ordenadas por un criterio claro: alfabeto, fecha.
2
Accionables
Cada fila puede tocarse para ver más o hacer algo.
3
Consistentes
Todas las filas tienen la misma estructura.
Tipos
- AAnaEstudiante
- LLuisEstudiante
Tipo 02
Dos líneas
Texto principal y secundario.
- SSaraEntregó el taller con comentarios sobre el diseño responsive y las imágenes.
Tipo 03
Tres líneas
Texto secundario más largo, recortado a dos líneas.
Tipo 04
Con control
Cada fila tiene una casilla o un interruptor.
Anatomía
- AAna GómezEntregó el taller 3
- LLuis PérezPendiente 12345
- Contenedor de la lista
- Elemento (fila)
- Elemento inicial: ícono, avatar o imagen
- Texto principal y secundario
- Elemento final: ícono, meta o control
Comportamiento
- Toda la fila es el área táctil, no solo el texto.
- Al pasar el mouse la fila se oscurece levemente.
- Las filas se pueden deslizar para acciones rápidas (archivar, borrar) en apps.
Medidas
| Medida | Valor de referencia |
|---|---|
| Una línea | 48 dp (56 con ícono o avatar) |
| Dos líneas | 64 dp (72 con avatar) |
| Tres líneas | 88 dp |
| Margen lateral | 16 dp |
| Avatar | 40 dp |
| Texto tras avatar | a 72 dp del borde |
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
Lista real
Usa
- y
- .
Un control por fila
Si toda la fila es botón, no metas otro botón adentro.
Seleccionada
aria-current o aria-selected en la fila activa.