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 explorar.
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.
Interactividad: Los elementos de la lista suelen representar elementos seleccionables o sobre los que se puede realizar una acción.
Uso y ubicación
Las listas pueden contener varios contenidos relacionados con elementos repetibles. A diferencia de las pilas, las listas llenan el contenedor de la vista de la app.
Usa scrims para indicar contenido desbordado Cuando una lista contiene más elementos de los que caben en una vista, se usa un scrim negro 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 no enfocados y enfocados.
Los elementos de la lista pueden ser accionables
Los elementos de una lista pueden actuar como acciones. Mantén la acción en el elemento de la lista.
Destaca el control que se activará cuando se presione, incluso si puedes desplazarte por otro elemento. Si se puede desplazar una lista o tarjeta detrás de otro elemento, solo enfoca el elemento que responde a la presión.
Qué debes hacer
Qué no debes hacer
Anatomía
La lista se compone de un contenedor desplazable y elementos de lista con un espacio uniforme. Las listas deben desplazarse verticalmente, con un mínimo de sobrepaso, cuando la cantidad de elementos supera el viewport.
A. Contenedor: Área desplazable
B. Elemento de la lista
C. Barras del sistema
Elemento de la lista: Cada elemento individual dentro de la lista.
A. Forma
B. Borde
C. Ícono inicial
D. Contenido de texto
E. Indicador final
Personalización
La mayor parte de la personalización se realiza con elementos de la lista.
| Propiedades | Personalización | Valores predeterminados |
|---|---|---|
| Elemento de la lista: Forma | Sí | 40 dp |
| Elemento de la lista: Ícono inicial y final | Sí | Ícono de símbolo mediano |
| Elemento de la lista: Valores de relleno | Sí | 2d dp, 20 dp |
| Elemento de la lista: Contenido | Sí | Una sola línea: Un elemento componible de texto para la etiqueta principal con Body Small Dos líneas: Una columna que contiene dos elementos componibles de texto para una etiqueta principal y secundaria Principal: Title Small Secundaria: Body Small |
| Lista: verticalArrangement | Sí | 20 dp |