Il componente Chip
è un elemento UI compatto e interattivo. Rappresenta entità complesse come un contatto o un tag, spesso con un'icona e un'etichetta. Può essere
controllabile, ignorabile o cliccabile.
Di seguito sono riportati i quattro tipi di chip e dove puoi utilizzarli:
- Assistenza: guida l'utente durante un'attività. Spesso appare come elemento UI temporaneo in risposta all'input dell'utente.
- Filtra: consente agli utenti di perfezionare i contenuti da una serie di opzioni. Possono essere selezionati o deselezionati e potrebbero includere un segno di spunta quando sono selezionati.
- Input: rappresenta le informazioni fornite dall'utente, come le selezioni in un menu. Possono contenere un'icona e del testo e fornire una "X" per la rimozione.
- Suggerimento: fornisce consigli all'utente in base all'attività o all'input recenti. In genere vengono visualizzati sotto un campo di immissione per richiedere le azioni dell'utente.
Piattaforma API
Esistono quattro componibili che corrispondono ai quattro tipi di chip. Le seguenti sezioni descrivono nel dettaglio questi componibili e le loro differenze. Tuttavia, condividono i seguenti parametri:
label
: la stringa visualizzata sul chip.icon
: l'icona visualizzata all'inizio del chip. Alcuni componibili specifici hanno un parametroleadingIcon
etrailingIcon
separati.onClick
: la funzione lambda chiamata dal chip quando l'utente lo preme.
Chip di assistenza
Il componibile AssistChip
offre un modo semplice per creare un chip di assistenza che solleciti l'utente in una determinata direzione. Una caratteristica distintiva è il parametro leadingIcon
, che ti consente di visualizzare un'icona sul lato sinistro del chip. L'esempio seguente mostra come 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) ) } ) }
L'implementazione si presenta come segue.
Icona filtro
Il componibile FilterChip
richiede di monitorare se il chip è selezionato o meno. L'esempio seguente mostra come mostrare un'icona selezionata iniziale solo quando l'utente ha selezionato il 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 }, ) }
Se deselezionata, questa implementazione appare come segue:
Se selezionato, il suo aspetto sarà il seguente:
Chip di input
Puoi utilizzare il componibile InputChip
per creare chip risultanti dall'interazione dell'utente. Ad esempio, in un client di posta, quando l'utente scrive un'email, un chip di input potrebbe rappresentare una persona di cui l'utente ha inserito l'indirizzo nel campo "a:".
La seguente implementazione mostra un chip di input che è già in uno stato selezionato. L'utente ignora il chip quando lo preme.
@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) ) }, ) }
L'implementazione si presenta come segue.
Chip di suggerimento
Il componibile SuggestionChip
è il componibile più semplice elencato in questa pagina, sia nella definizione dell'API che nei casi d'uso comuni. I chip di suggerimento presentano suggerimenti generati dinamicamente. Ad esempio, in un'app di chat IA, puoi
utilizzare i chip di suggerimenti per presentare possibili risposte al messaggio
più recente.
Considera questa implementazione di SuggestionChip
:
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
Questa implementazione si presenta nel seguente modo:
Chip con elevata intensità
Tutti gli esempi in questo documento utilizzano elementi componibili di base con aspetto piatto. Se vuoi un chip con aspetto elevato, utilizza uno dei tre seguenti componibili: