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. Ele pode ser
marcado, dispensável ou clicável.
Confira abaixo os quatro tipos de ícone e onde eles podem ser usados:
- Assistência: orienta o usuário durante uma tarefa. Geralmente aparece como um elemento temporário da interface em resposta a uma entrada do usuário.
- Filtrar: permite que os usuários refinem o conteúdo de um conjunto de opções. Eles podem ser selecionados ou desmarcados e podem incluir um ícone de verificação quando selecionados.
- Entrada: representa informações fornecidas pelo usuário, como seleções em um menu. Eles podem conter um ícone e um texto e incluir um "X" para remoção.
- Sugestão: fornece 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 a seguir descrevem esses elementos combináveis e as diferenças em detalhes. No entanto, elas compartilham os seguintes parâmetros:
label
: a string que aparece no ícone.icon
: o ícone exibido no início do ícone. Alguns dos elementos que podem ser compostos específicos têm parâmetrosleadingIcon
etrailingIcon
separados.onClick
: o lambda que o ícone chama quando o usuário o pressiona.
Ícone de assistência
O elemento combinável AssistChip
oferece uma maneira simples de criar um
ícone de assistência que aponta o usuário para uma direção específica. Uma característica
distintiva é o parâmetro leadingIcon
, que permite mostrar 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 forma:
Ícone de filtro
O elemento combinável FilterChip
exige que você rastreie se o ícone está ou não
selecionado. O exemplo a seguir demonstra como mostrar um ícone
marcado inicial somente quando o usuário seleciona 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 essa implementação é desmarcada, ela aparece da seguinte maneira:
Quando selecionado, ele aparece da seguinte forma:
Í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 com o endereço que o usuário inseriu
no campo "para:".
A implementação a seguir demonstra um ícone de entrada que já está no estado selecionado. O usuário dispensa o ícone ao pressionar.
@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 forma:
Ícone de sugestão
O elemento combinável SuggestionChip
é o mais básico dos elementos listados
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 de IA, é
possível usar ícones de sugestão para apresentar respostas possíveis à 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 forma:
Ícone elevado
Todos os exemplos neste documento usam os elementos combináveis de base que têm uma aparência simples. Se você quiser um ícone com aparência elevada, use um destes três elementos combináveis:
Outros recursos
- Documentação da interface do Material Design (em inglês)