Esta página foi traduzida pela API Cloud Translation.

Itens em lista

A visualização em lista mostra o conteúdo como itens de linha em uma lista de coluna única com rolagem vertical. Essa visualização é melhor quando os usuários dependem da leitura de texto e da visualização de dados para fazer a seleção.

Os itens de lista exigem menos espaço vertical do que os itens de grade, permitindo que mais itens sejam mostrados na tela.

Componente "Grades"

As grades oferecem um modo de exibição alternativo que destaca imagens

Anatomia

Em uma visualização em lista, cada linha contém um bloco que representa um item da lista. As ações principais podem preencher o bloco para que os usuários possam iniciar a ação em qualquer lugar. Para ações suplementares que são representadas por ícones e texto, apenas a região que contém os ícones e o texto é acionável.

1. Ícone principal
2. Botão de ativação
3. Botão do interruptor desativado
4. Texto principal e secundário
5. Bloco de conteúdo

Especificações

Rótulos de layout

Definições de E, M, KL, P e Flex

Item da lista de linha única

Item da lista com duas linhas

Item da lista de duas linhas invertido

Item da lista de várias linhas com cabeçalho

Item da lista com várias linhas sem cabeçalho

Item da lista com estouro de texto

Item da lista com ações divididas

Posicionamento do ícone indicador nos itens da lista

Dimensionamento de layouts

Esses layouts de referência mostram como adaptar itens de lista para acomodar telas de várias larguras e alturas. As categorias de largura e altura são definidas na seção Layout. Todos os valores de pixel estão em pixels renderizados, antes de ocorrer qualquer diminuição ou aumento de amostragem.

Layout

Margens, linhas-chave e padding para vários tamanhos de tela

Rótulos de layout

Definições de E, M, KL, P e Flex

Telas padrão, larga e extralarga

Telas padrão, ampla e extralarga com bloco de conteúdo

Telas supergrandes

Estilos

Diretrizes de tipografia

Referências de escala e grade, exemplos tipográficos e muito mais

Diretrizes de cores

Paletas, valores de elevação e opacidade e muito mais

Tipografia

Estilo de fonte	Fonte	Peso	Tamanho (dp)
Texto 1	Roboto	Normal	32
Texto 3	Roboto	Normal	24

Cor

Elemento	Cor(modo diurno)	Cor (modo noturno)
Tipo principal / ícones	Branco	Branco @ 88%
Tipo secundário / ícones	Branco @ 72%	Branco a 60%
Linha divisória	Branco @ 22%	Branco @ 12%
Plano de fundo do item da lista	Preto	Preto

Tamanho

Elemento	Tamanho (dp)
Altura do item da lista	96 (telas curtas) / 116 (tela padrão) / 128 (tela alta)
Ícone principal	44
Ícone terciário	24
Bloco de conteúdo	Altura do item da lista menos 1 dp
Avatar médio	76
Espessura da linha divisória	1