O componente Chip
é um elemento compacto interativo que
representa uma entrada, um atributo ou uma ação.
Anatomia
Os ícones podem conter até dois rótulos de texto e uma figura opcional. É necessário
ter pelo menos um rótulo de texto ou uma figura. Se o texto do rótulo for muito longo, ele
pode ficar truncado no ícone. O rótulo principal pode ocupar uma linha de texto, caso
o ícone tenha dois rótulos, e até duas linhas
caso tenha um só.
A. Rótulo principal
B. Rótulo secundário (opcional)
C. Figura (opcional)
D. Contêiner
Recomendações de design
Ícone com imagem
Os ícones de imagem contêm ações relacionadas à imagem escolhida. Os ícones de imagem
funcionam bem para comunicar uma aparência mais específica.
Chip(
...
label = {
Text(
text = "Summer Mix",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
colors = ChipDefaults.imageBackgroundChipColors(
backgroundImagePainter = painterResource(id = R.drawable.clouds)
)
)
Ícone de avatar
Use esses ícones para ações relacionadas ao avatar selecionado. Os ícones
de avatar também podem incluir figuras para facilitar o reconhecimento,
como a foto de um contato. Os ícones de avatar têm 32 x 32 dp.
Chip(
...
label = {
Text(text = "Mark Castle")
},
icon = {
Icon(
painter = painterResource(id = R.drawable.avatar),
contentDescription = null,
modifier = Modifier.size(ChipDefaults.LargeIconSize)
.wrapContentSize(align = Alignment.Center)
)
}
)
Ícone compacto
O componente relacionado
CompactChip é uma variante menor do componente de ícone,
projetado para casos de uso em que há menos espaço. Os ícones compactos
têm um slot para uma figura e outro para um rótulo com uma linha. Os ícones
compactos incluem uma área tocável com altura de 48 dp.
Hierarquia
Use preenchimentos de cores diferentes para indicar a hierarquia de ícones. Projete cada tela para
conter um único ícone em destaque para a ação principal.
Prioridade alta
Use ícones de prioridade alta para ações principais na página. Use cores
primárias para o preenchimento desse tipo de ícone.
Prioridade média
Use ícones de prioridade média para ações menos importantes do que as
principais. Use cores secundárias para o preenchimento desse tipo de ícone.
Se preferir, use o componente
personalizado
OutlinedChip. Esse componente tem um plano de fundo transparente, um traço
colorido da variante de 60% de opacidade e conteúdo com a cor principal.
Prioridade baixa
Os ícones de prioridade baixa têm um preenchimento transparente e apenas um rótulo de texto. Use ícones de
prioridade baixa para indicar uma relação filha com um ícone principal ou
secundário.
Tamanhos
Ícone padrão
Figura: 24 dp
Altura: 52 dp
Ícone compacto
Figura: 20 dp
Altura: 32 dp
Área tocável: 48 dp
Uso
Veja a seguir alguns exemplos de uso de ícones, como ícones padrão nas configurações e de imagem
em um app de exercício.