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 irmãos com elementos repetíveis. Ao contrário das pilhas, as listas preenchem o contêiner de visualização do app.
Use scrims para indicar conteúdo de estouro Quando uma lista tem mais itens do que cabe em uma visualização, um scrim preto é usado perto dos limites da lista.
As listas podem usar um título, se necessário Títulos podem ser estáticos ou fixos para fins de esclarecimento.
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
Destaque o controle que será ativado ao tocar, mesmo que seja possível rolar outra coisa. Se uma lista ou um card puder ser rolado atrás de outro elemento, focalize apenas o item que responde ao toque.
O que fazer
O que não fazer
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 overshoot 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
Lista de itens: cada elemento individual na lista.
A. Forma
B. Borda
C. Ícone principal
D. Conteúdo de texto
E. Indicador de rastreamento
Personalização
A maior parte da personalização acontece nos itens da lista.
| Propriedades | Personalização | Padrões |
|---|---|---|
| Item da lista: forma | Sim | 40 dp |
| Item da lista: ícone inicial e final | Sim | Ícone de tamanho médio |
| Item da lista: valores de padding | Sim | 2 dp, 20 dp |
| Item da lista: conteúdo | Sim | Linha única: 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 |