O componente Chip
é um elemento de interface compacto e interativo. Ele representa entidades
complexas, como um contato ou uma tag, geralmente com um ícone e um rótulo. Ela pode ser
marcável, dispensável ou clicável.
Estes são os quatro tipos de ícones e onde eles podem ser usados:
- Assistência: orienta o usuário durante uma tarefa. Geralmente aparece como um elemento de interface temporário em resposta a uma entrada do usuário.
- Filtrar: permite que os usuários refinem o conteúdo com base em um conjunto de opções. Elas podem ser selecionadas ou desmarcadas e podem incluir um ícone de verificação quando selecionadas.
- Entrada: representa as informações fornecidas pelo usuário, como seleções em um menu. Eles podem conter um ícone e um texto, além de incluir um "X" para remoção.
- Sugestão: oferece recomendações ao usuário com base na atividade ou entrada recente dele. Normalmente aparecem abaixo de um campo de entrada para solicitar ações do usuário.
Plataforma da API
Há quatro elementos combináveis que correspondem aos quatro tipos de ícones. As seções abaixo descrevem esses elementos e as diferenças em detalhes. No entanto, eles compartilham os seguintes parâmetros:
label
: a string que aparece no ícone.icon
: o ícone que aparece no início do ícone. Alguns dos elementos combináveis específicos têm um parâmetroleadingIcon
etrailingIcon
separado.onClick
: a lambda que o ícone chama quando o usuário o pressiona.
Ícone de assistência
O elemento combinável AssistChip
oferece uma maneira direta de criar um
ícone de assistência que orienta o usuário para uma direção específica. Um recurso distintivo
é o parâmetro leadingIcon
, que permite exibir um ícone no lado esquerdo
do ícone. O exemplo abaixo demonstra como fazer a implementação:
@Composable fun AssistChipExample() { AssistChip( onClick = { Log.d("Assist chip", "hello world") }, label = { Text("Assist chip") }, leadingIcon = { Icon( Icons.Filled.Settings, contentDescription = "Localized description", Modifier.size(AssistChipDefaults.IconSize) ) } ) }
Essa implementação aparece da seguinte maneira:
Ícone de filtro
O elemento combinável FilterChip
exige que você rastreie se o ícone
foi selecionado ou não. O exemplo abaixo demonstra como mostrar um ícone
marcado inicial somente quando o usuário selecionar o ícone:
@Composable fun FilterChipExample() { var selected by remember { mutableStateOf(false) } FilterChip( onClick = { selected = !selected }, label = { Text("Filter chip") }, selected = selected, leadingIcon = if (selected) { { Icon( imageVector = Icons.Filled.Done, contentDescription = "Done icon", modifier = Modifier.size(FilterChipDefaults.IconSize) ) } } else { null }, ) }
Quando não está selecionada, essa implementação aparece da seguinte maneira:
E aparece da seguinte maneira quando selecionado:
Ícone de entrada
Você pode usar o elemento combinável InputChip
para criar ícones resultantes da
interação do usuário. Por exemplo, em um cliente de e-mail, quando o usuário está escrevendo um
e-mail, um ícone de entrada pode representar uma pessoa cujo endereço o usuário inseriu
no campo "to:".
A implementação abaixo demonstra um ícone de entrada que já está no estado selecionado. O usuário dispensa o ícone ao pressioná-lo.
@Composable fun InputChipExample( text: String, onDismiss: () -> Unit, ) { var enabled by remember { mutableStateOf(true) } if (!enabled) return InputChip( onClick = { onDismiss() enabled = !enabled }, label = { Text(text) }, selected = enabled, avatar = { Icon( Icons.Filled.Person, contentDescription = "Localized description", Modifier.size(InputChipDefaults.AvatarSize) ) }, trailingIcon = { Icon( Icons.Default.Close, contentDescription = "Localized description", Modifier.size(InputChipDefaults.AvatarSize) ) }, ) }
Essa implementação aparece da seguinte maneira:
Ícone de sugestão
O elemento combinável SuggestionChip
é o mais básico listado
nesta página, tanto na definição da API quanto nos casos de uso comuns. Os ícones
de sugestão apresentam dicas geradas dinamicamente. Por exemplo, em um app de chat com IA, é
possível usar ícones de sugestão para apresentar possíveis respostas à mensagem
mais recente.
Considere esta implementação de SuggestionChip
:
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
Essa implementação aparece da seguinte maneira:
Ícone elevado
Todos os exemplos neste documento usam os elementos combináveis base que têm uma aparência plana. Se você quiser um ícone com uma aparência elevada, use um dos três elementos combináveis abaixo:
Outros recursos
- Documentos sobre a interface do Material Design (link em inglês)