Chip

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, dispensado ou clicável.

Confira os quatro tipos de ícones e onde você pode usá-los:

  • Assistir: orienta o usuário durante uma tarefa. Geralmente aparece como uma interface temporária em resposta à entrada do usuário.
  • Filtro: 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 marca de seleção quando selecionados.
  • 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 ações do usuário.
Um exemplo de cada um dos quatro componentes do chip, com as características únicas destacadas.
Figura 1. Os quatro componentes do ícone.

Superfície 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 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êm leadingIcon e trailingIcon 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 recurso diferencial é o parâmetro leadingIcon, que permite exibir um ícone no lado esquerdo do ícone. O exemplo a seguir demonstra como implementá-lo:

@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)
            )
        }
    )
}
Chip.kt

Essa implementação aparece da seguinte maneira:

Um ícone de assistência simples.
Figura 2. Ícone de assistência.

Í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 mostrar um ícone marcado apenas quando o usuário selecionou 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
        },
    )
}
Chip.kt

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.
Figura 3. Ícone de filtro não selecionado.

E aparece da seguinte maneira quando selecionado:

Chip de filtro selecionado, com uma marca de seleção e um plano de fundo colorido.
Figura 4. Ícone de filtro selecionado.

Ícone de entrada

É possível usar o elemento combinável InputChip para criar ícones que resultam 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 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)
            )
        },
    )
}
Chip.kt

Essa implementação aparece da seguinte maneira.

Um ícone de entrada com um avatar e um ícone à direita.
Figura 5. Ícone de entrada.

Ícone de sugestão

O SuggestionChip é o elemento mais básico listado nesta página, tanto pela 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, você pode 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") }
    )
}
Chip.kt

Essa implementação aparece da seguinte maneira:

Um ícone de assistência simples.
Figura 6. Ícone de assistência.

Ícone elevado

Todos os exemplos neste documento usam os elementos combináveis básicos que têm uma aparência plana. Se você quiser um ícone com aparência elevada, use um dos três elementos combináveis abaixo:

Outros recursos