Um item expansível é um ícone personalizado que exibe mais conteúdo inline.
Ícone de item expansível
Os itens expansíveis permitem que os apps incluam conteúdo de alta densidade em menos espaço na tela. Use esse componente quando quiser manter um app compacto e, ao mesmo tempo, permitir que os usuários acessem rapidamente outros conteúdos.
Use esse componente para permitir que os usuários realizem as seguintes tarefas:
- Mostrar mais itens da lista (fichas, cartas)
- Mostrar mais texto
Anatomia
Expansão da lista
O ícone precisa estar alinhado ao centro.
A. Rótulo
O texto do rótulo pode ser personalizado. O padrão é "Mostrar mais".
B. Contêiner
O botão precisa incluir uma borda do contêiner.
C) Ícone "Expandir"
O ícone padrão é a seta para baixo, que pode ser personalizada ou
removida. O ícone fica alinhado à direita para uma localidade de idioma LTR e
à esquerda para uma localidade de idioma RTL.
Texto de expansão
O ícone precisa estar alinhado ao centro.
A. Rótulo
O texto do rótulo pode ser personalizado. O padrão é "Mais".
B. Contêiner
O botão tem duas variantes: circunscrito e não circunscrito.
C) Ícone "Expandir"
O ícone padrão é a seta para baixo, que pode ser personalizada ou
removida. O ícone fica alinhado à direita para uma localidade de idioma LTR e
à esquerda para uma localidade de idioma RTL.
Comportamento
Lista de expansão
Toque no ícone para abrir e mostrar mais itens em uma lista. A ação de expansão é animada, ocultando o texto Show more e revelando os outros itens em um movimento suave. Você pode personalizar o número de itens exibidos no estado recolhido. O número recomendado de itens é três.
Texto de expansão
Toque no ícone para abrir e mostrar mais texto. A ação de expansão é animada, ocultando o texto More e revelando os outros itens em um movimento suave. Você pode personalizar o número de linhas de texto exibidas no estado recolhido. O número recomendado de linhas é oito.
O ponto de toque consiste em toda a área de texto, não apenas no botão.
Estilos das fichas
Lista de expansão
Tamanho do ícone: 20 dp x 20 dp
Cor do ícone: Na plataforma
Altura: 32 dp
Largura: varia de acordo com o texto e o idioma
Traço: 1 dp
Estilo do rótulo: legenda 1
Cor do rótulo: na plataforma
Texto de expansão
Tamanho do ícone: 20 dp x 20 dp
Cor do ícone: Na plataforma
Altura: 32 dp
Largura: varia de acordo com o texto e o idioma
Traço: 0 ou 1 dp
Preenchimento: nenhum
Estilo do rótulo: Legenda 1
Cor do rótulo: na plataforma
Padding
Tanto para a variante da lista quanto para a variante de texto do componente de item expansível, o ícone precisa ter os seguintes valores de padding:
- Padding superior: 8 dp
- Padding inferior: 16 dp
Uso
Exemplos de uso de itens expansíveis:
