Chip

El componente Chip es un elemento de la IU interactivo y compacto. Representa situaciones complejas entidades, como un contacto o una etiqueta, que a menudo tienen un ícono y una etiqueta. Sí, es posible se puede marcar, descartable o en el que se puede hacer clic.

Los cuatro tipos de chips y dónde puedes usarlos son los siguientes:

  • Asistente: Guía al usuario durante una tarea. Suele aparecer como una IU temporal en respuesta a la entrada del usuario.
  • Filtro: Permite que los usuarios definan mejor el contenido a partir de un conjunto de opciones. Pueden seleccionar o anular la selección, y puede incluir un ícono de marca de verificación cuando se selecciona.
  • Entrada: Representa la información que proporciona el usuario, como las selecciones en un menú. Pueden contener un ícono y texto, y proporcionar una "X" para quitarlos.
  • Sugerencia: Proporciona recomendaciones al usuario en función de su experiencia actividad o entrada. Suelen aparecer debajo de un campo de entrada para solicitar al usuario acciones.
Un ejemplo de cada uno de los cuatro componentes del chip, con sus características únicas destacadas.
Figura 1: Los cuatro componentes del chip.

Plataforma de API

Hay cuatro elementos componibles que corresponden a los cuatro tipos de chips. El En las siguientes secciones, se describen en detalle estos elementos componibles y sus diferencias. Sin embargo, comparten los siguientes parámetros:

  • label: Es la cadena que aparece en el chip.
  • icon: Es el ícono que se muestra al comienzo del chip. Algunos de los elementos componibles específicos tienen un parámetro leadingIcon y trailingIcon separados.
  • onClick: Es la lambda a la que llama el chip cuando el usuario lo presiona.

Chip de asistencia

El elemento AssistChip componible proporciona una forma sencilla de crear un elemento chip de asistencia que empuja al usuario en una dirección en particular. Un aspecto distintivo atributo es su parámetro leadingIcon, que te permite mostrar un ícono a la izquierda. lado del chip. En el siguiente ejemplo, se muestra cómo puedes implementarlo:

@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

Esta implementación aparece de la siguiente manera.

Un chip de asistencia simple.
Figura 2: Chip de asistencia.

Chip de filtro

El elemento componible FilterChip requiere que realices un seguimiento de si se seleccionó o no el chip. El siguiente ejemplo demuestra cómo puedes mostrar una línea principal ícono marcado solo cuando el usuario seleccione el chip:

@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

Esta implementación se muestra de la siguiente manera cuando no se selecciona:

Un chip de filtro no seleccionado, sin verificación y sin fondo del plan.
Figura 3: Chip de filtro sin seleccionar.

Y se muestra de la siguiente manera cuando se selecciona:

Chip de filtro seleccionado, con una marca de verificación y un fondo de color.
Figura 4: Se seleccionó el chip de filtro.

Chip de entrada

Puedes usar el elemento componible InputChip para crear chips que resulten de la interacción del usuario. Por ejemplo, en un cliente de correo electrónico, cuando el usuario escribe un correo electrónico, un chip de entrada puede representar a una persona cuya dirección el usuario ingresó en el campo “Para:”.

En la siguiente implementación, se muestra un chip de entrada que ya se encuentra en el estado seleccionado. El usuario descarta el chip cuando lo presiona.

@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

Esta implementación aparece de la siguiente manera:

Un chip de entrada con un avatar y un ícono final.
Figura 5: Chip de entrada

Chip de sugerencias

El elemento componible SuggestionChip es el más básico de los elementos componibles que se enumeran en esta página, tanto en su definición de API como en sus casos de uso comunes. Los chips de sugerencias presentan sugerencias generadas de forma dinámica. Por ejemplo, en una app de chat con IA, puedes usar chips de sugerencias para presentar posibles respuestas a los mensajes mensaje.

Considera esta implementación de SuggestionChip:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}
Chip.kt

Esta implementación aparece de la siguiente manera:

Un chip de asistencia sencillo.
Figura 6: Chip de asistencia.

Chip elevado

En todos los ejemplos de este documento, se usan los elementos básicos componibles que toman un plano en su apariencia. Si quieres un chip que tenga una apariencia elevada, usa uno de los siguientes elementos componibles:

Recursos adicionales