O componente Chip
é um elemento de interface compacto e interativo. Ele representa
entidades como um contato ou uma tag, muitas vezes com um ícone e um rótulo. Pode ser
selecioná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 uma interface temporária em resposta à entrada do usuário.
- Filtrar: permite que os usuários refinem o conteúdo com base em um conjunto de opções. Eles podem selecionada ou desmarcada, podendo incluir um ícone de verificação.
- Entrada: representa as informações fornecidas pelo usuário, como seleções em um . Eles podem conter um ícone e um texto, além de fornecer um "X" para remoção.
- Sugestão: fornece recomendações para o usuário com base nas informações recentes atividade ou entrada. Normalmente aparecem abaixo de um campo de entrada para solicitar que o usuário ações.
Plataforma da API
Há quatro elementos combináveis que correspondem aos quatro tipos de ícones. O as seções a seguir descrevem esses elementos combináveis e as diferenças entre eles 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. Algumas elementos combináveis específicos têmleadingIcon
etrailingIcon
separados; .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 em uma direção específica. Um diferencial
recurso é o parâmetro leadingIcon
, que permite exibir um ícone à esquerda
lado 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:
![Um ícone de assistência simples.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-assist.png?authuser=4&hl=pt)
Ícone de filtro
O elemento combinável FilterChip
exige que você monitore se o ícone é ou não
é selecionada. O exemplo a seguir demonstra como você pode mostrar uma
ícone marcado 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 não está selecionada, essa implementação aparece da seguinte maneira:
![Um ícone de filtro desmarcado, sem marca e com plano de fundo do plano.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter.png?authuser=4&hl=pt)
E aparece da seguinte maneira quando selecionado:
![Ícone de filtro selecionado, com uma marca de seleção e um plano de fundo colorido.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter-active.png?authuser=4&hl=pt)
Ícone de entrada
Você pode usar o elemento combinável InputChip
para criar ícones resultantes de
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
na seção "to:" .
A implementação abaixo demonstra um ícone de entrada que já está em um 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:
![Um ícone de entrada com um avatar e um ícone à direita.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-input.png?authuser=4&hl=pt)
Ícone de sugestão
O SuggestionChip
é o elemento mais básico listado
nesta página, tanto na definição de API quanto nos casos de uso comuns. Sugestão
os ícones apresentam dicas geradas dinamicamente. Por exemplo, em um app de chat com IA,
pode usar ícones de sugestão para apresentar possíveis respostas ao
mensagem.
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:
![Um ícone de assistência simples.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-suggestion.png?authuser=4&hl=pt)
Ícone elevado
Todos os exemplos neste documento usam os elementos combináveis base que têm uma camada plana aparência Se você quiser um ícone com 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)