Listas

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 de 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.

Usar scrims para indicar conteúdo excedente

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 maior clareza.

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. Mantenha 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 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 fim

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	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