Ícone

O componente Chip é um elemento da 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 clicado.

Os quatro tipos de ícones e onde eles podem ser usados são os seguintes:

  • Assistência: orienta o usuário durante uma tarefa. Geralmente aparece como um elemento temporário da interface 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 verificação quando selecionados.
  • 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 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 ícone, com as características exclusivas destacadas.
Figura 1. Os quatro componentes de ícone.

Superfície da API

Há quatro elementos que correspondem aos quatro tipos de ícones. As seções abaixo descrevem esses elementos que podem ser compostos 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 mostrado no início do ícone. Alguns dos elementos que podem ser compostos específicos têm um parâmetro leadingIcon e trailingIcon separado.
  • onClick: a lambda que o ícone chama quando o usuário pressiona o ícone.

Ícone de assistência

O elemento combinável AssistChip oferece uma maneira simples de criar um ícone de ajuda que orienta o usuário em uma direção específica. Um recurso distintivo é o parâmetro leadingIcon, que permite mostrar um ícone no lado esquerdo do ícone. O exemplo abaixo demonstra como implementar isso:

@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 é mostrada abaixo.

Um ícone de assistente simples que mostra um ícone principal e um rótulo de texto.
Figura 2. Ícone de assistência.

Ícone do filtro

O elemento combinável FilterChip exige que você acompanhe se o ícone está selecionado ou não. O exemplo a seguir demonstra como mostrar um ícone de marcação 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
        },
    )
}

Essa implementação aparece da seguinte forma quando não está selecionada:

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

E aparece da seguinte forma quando selecionado:

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

Ícone de entrada

Use o elemento de composição 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 um contato que o usuário adicionou ao campo "Para:".

A implementação a seguir demonstra um ícone de entrada que já está em um 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 é mostrada abaixo.

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

Chip de sugestão de resposta

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 conversa com IA, você pode usar chips de sugestão de resposta 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") }
    )
}

A implementação é mostrada abaixo:

Um chip de sugestão de resposta simples.
Figura 6. Chip de sugestão de resposta.

Ícone elevado

Todos os exemplos neste documento usam os elementos combináveis de 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