Las listas son contenedores de elementos con desplazamiento y enfoque integrados.
Principios
Organización clara: Las listas deben presentar la información en una disposición vertical clara y fácil de comprender de un vistazo.
Presentación coherente de los elementos: Los elementos de la lista deben seguir una estructura visual coherente.
Enfoque y navegación: En las interfaces que dependen de la navegación direccional, las listas deben indicar claramente el elemento enfocado en cada momento.
Interactividad: Los elementos de la lista suelen representar elementos seleccionables o sobre los que se puede realizar una acción.
Uso y posición
Las listas pueden contener varios elementos repetibles con contenido hermano. A diferencia de las pilas, las listas llenan el contenedor de la vista de la app.
Las listas pueden mostrar uno o más elementos seleccionables dentro de una vista.
Usa scrims para indicar el contenido desbordado
Cuando una lista contiene más elementos de los que caben en una vista, se usa una pantalla negra cerca de los límites de la lista.
Las listas pueden usar un título si es necesario
Se puede usar un título estático o fijo en una lista para mayor claridad.
Qué no debes hacer
Usa la profundidad para indicar el enfoque
Los elementos de la lista se mueven entre 0 y +4 de profundidad para los estados enfocados y no enfocados.
Los elementos de la lista pueden ser prácticos
Los elementos de una lista pueden actuar como acciones. Mantén la acción en el elemento de la lista
Anatomía
La lista se compone de un contenedor de desplazamiento y elementos de lista con un espaciado uniforme. Las listas deben desplazarse verticalmente, con un exceso mínimo, cuando la cantidad de elementos supera el viewport.
A. Contenedor: Área desplazable
B. Elemento de la lista
C. Barras del sistema
Elemento de lista: Cada elemento individual dentro de la lista.
A. Forma
B. Borde
C. Ícono inicial
D. Contenido de texto
E. Indicador de arrastre
Personalización
La mayor parte de la personalización se realiza con elementos de lista.
| Propiedades | Personalización | Configuración predeterminada |
|---|---|---|
| Elemento de lista: Forma | Sí | 40 dp |
| Elemento de lista: Ícono inicial y final | Sí | Ícono de símbolo mediano |
| Elemento de lista: valores de relleno | Sí | 2 dp, 20 dp |
| Elemento de lista: Contenido | Sí | De una sola línea: Un elemento componible Text para la etiqueta principal que usa Body Small De dos líneas: Una columna que contiene dos elementos componibles Text para una etiqueta principal y una secundaria Principal: Title Small Secundaria: Body Small |
| Lista: verticalArrangement | Sí | 20 dp |