El componente Chip
es un elemento de IU compacto e interactivo. Representa entidades complejas como un contacto o una etiqueta, a menudo con un ícono y una etiqueta. Se puede marcar, descartar o hacer clic.
Estos son los cuatro tipos de chips y dónde podrías usarlos:
- Asistencia: Guía al usuario durante una tarea. A menudo, aparece como un elemento temporal de la IU en respuesta a las entradas del usuario.
- Filtro: Permite a los usuarios definir mejor el contenido a partir de un conjunto de opciones. Se pueden seleccionar o anular la selección y pueden incluir un ícono de marca de verificación cuando se seleccionan.
- Entrada: Representa la información que proporciona el usuario, como las selecciones en un menú. Pueden contener un ícono y texto, así como proporcionar una "X" para quitarlo.
- Sugerencia: Proporciona recomendaciones al usuario en función de su actividad o entrada reciente. Por lo general, aparecen debajo de un campo de entrada para solicitar acciones al usuario.
Plataforma de API
Hay cuatro elementos componibles que corresponden a los cuatro tipos de chips. En las siguientes secciones, se describen estos elementos componibles y sus diferencias en detalle. 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ámetroleadingIcon
ytrailingIcon
independientes.onClick
: Es la expresión lambda a la que llama el chip cuando el usuario la presiona.
Chip de asistencia
El elemento componible AssistChip
proporciona una forma directa de crear un chip de asistencia que empuje al usuario en una dirección en particular. Una característica distintiva es su parámetro leadingIcon
, que te permite mostrar un ícono en el lado izquierdo del chip. En el siguiente ejemplo, se muestra cómo 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) ) } ) }
Esta implementación aparece de la siguiente manera:
Elemento de filtro
El elemento componible FilterChip
requiere que hagas un seguimiento de si se seleccionó el chip o no. En el siguiente ejemplo, se muestra cómo puedes mostrar un ícono de primer marcado marcado solo cuando el usuario haya seleccionado 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 }, ) }
Esta implementación se muestra de la siguiente manera cuando no se selecciona:
Y aparece de la siguiente manera cuando se selecciona:
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 mensaje, un chip de entrada podría representar a una persona cuya dirección el usuario ingresó en el campo “to:”.
En la siguiente implementación, se muestra un chip de entrada que ya está en un 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) ) }, ) }
Esta implementación aparece de la siguiente manera:
Chip de sugerencias
El elemento componible SuggestionChip
es el más básico que se enumera 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 al mensaje más reciente.
Considera la implementación de SuggestionChip
:
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
Esta implementación se muestra de la siguiente manera:
Chip elevado
En todos los ejemplos de este documento, se usan los elementos básicos componibles que toman una apariencia plana. Si quieres un chip que tenga un aspecto elevado, usa uno de los siguientes tres elementos componibles: