As listas são contêineres de elementos com rolagem e foco integrados.
Princípios
Organização clara: as listas precisam apresentar informações em uma disposição vertical clara e fácil de ler.
Apresentação consistente de itens: os itens da lista precisam seguir uma estrutura visual consistente.
Capacidade de foco e navegação: em interfaces que dependem da navegação direcional, as listas precisam indicar claramente o item em foco.
Interatividade: os itens de lista geralmente representam elementos selecionáveis ou acionáveis.
Uso e posicionamento
As listas podem conter vários conteúdos semelhantes com elementos repetíveis. Ao contrário das pilhas, as listas preenchem o contêiner de visualização do app.
As listas podem mostrar um ou mais itens selecionáveis em uma visualização.
Usar scrims para indicar conteúdo excedente
Quando uma lista tem mais itens do que cabem em uma visualização, uma máscara preta é usada perto dos limites da lista.
As listas podem usar um título, se necessário
Um título estático ou fixo pode ser usado em uma lista para maior clareza.
O que não fazer
Use a profundidade para indicar o foco
Os itens da lista se movem entre 0 e +4 de profundidade para estados sem foco e com foco.
Os itens da lista podem ser acionáveis
Os itens em uma lista podem funcionar como ações. Manter a ação no item da lista
Anatomia
A lista é composta por um contêiner de rolagem e itens de lista com espaçamento consistente. As listas precisam rolar verticalmente, com um excesso mínimo, quando o número de itens excede a janela de visualização.
A. Contêiner: área rolável
B. Item da lista
C. Barras de sistema
Item da lista: cada elemento individual na lista.
A. Forma
B. Borda
C. Ícone principal
D. Text content
E. Indicador de fim
Personalização
A maior parte da personalização acontece com itens de lista.
| Propriedades | Personalização | Padrões |
|---|---|---|
| Item da lista: forma | Sim | 40 dp |
| Item da lista: ícone inicial e final | Sim | Ícone de símbolo médio |
| Item da lista: valores de padding | Sim | 2d dp, 20 dp |
| Item da lista: conteúdo | Sim | Uma linha: um elemento combinável Text para o rótulo principal usando Body Small. Duas linhas: uma coluna contendo dois elementos combináveis Text para um rótulo principal e um secundário. Principal: Title Small Secundário: Body Small |
| Lista: verticalArrangement | Sim | 20 dp |