Ícone

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.
Um exemplo de cada um dos quatro componentes de chip, com as características únicas destacadas.
Figura 1. Os quatro componentes do chip.

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âmetros leadingIcon e trailingIcon 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)
            )
        }
    )
}
Chip.kt

Essa implementação aparece da seguinte forma:

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

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

Quando essa implementação é desmarcada, ela aparece da seguinte maneira:

Um ícone de filtro não selecionado, sem marca de seleção e um plano de fundo com plano de fundo.
Figura 3. Ícone de filtro desmarcado.

Quando selecionado, ele aparece da seguinte forma:

Ícone de filtro selecionado, com marca de seleção e um fundo colorido.
Figura 4. Ícone de filtro 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 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)
            )
        },
    )
}
Chip.kt

Essa implementação aparece da seguinte forma:

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

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

Essa implementação aparece da seguinte forma:

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

Í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