Chip

Die Chip-Komponente ist ein kompaktes, interaktives UI-Element. Sie stellt komplexe Einheiten wie einen Kontakt oder ein Tag dar, oft mit einem Symbol und einem Label. Sie kann aktiviert, geschlossen oder angeklickt werden.

Die vier Arten von Chips und ihre Verwendungsmöglichkeiten sind:

• Assist (Unterstützen): Führt den Nutzer durch eine Aufgabe. Wird häufig als temporäres UI-Element als Reaktion auf Nutzereingaben angezeigt.
• Filter: Nutzer können Inhalte anhand einer Reihe von Optionen filtern. Sie können ausgewählt oder abgewählt werden und enthalten bei Auswahl möglicherweise ein Häkchensymbol.
• Eingabe: Stellt von Nutzern bereitgestellte Informationen dar, z. B. Auswahlen in einem Menü. Sie können ein Symbol und Text enthalten und ein X zum Entfernen bereitstellen.
• Vorschlag: Bietet dem Nutzer Empfehlungen basierend auf seinen letzten Aktivitäten oder Eingaben. Sie werden in der Regel unter einem Eingabefeld angezeigt, um Nutzeraktionen zu veranlassen.

API-Oberfläche

Es gibt vier Composables, die den vier Arten von Chips entsprechen. In den folgenden Abschnitten werden diese Composables und ihre Unterschiede im Detail beschrieben. Sie haben jedoch die folgenden Parameter gemeinsam:

• label: Der String, der auf dem Chip angezeigt wird.
• icon: Das Symbol, das am Anfang des Chipherstellers angezeigt wird. Einige der spezifischen Composables haben einen separaten leadingIcon- und trailingIcon-Parameter.
• onClick: Die Lambda-Funktion, die vom Chip aufgerufen wird, wenn der Nutzer darauf tippt.

Assist-Chip

Mit der zusammensetzbaren Funktion AssistChip lässt sich ganz einfach ein Assist-Chip erstellen, der den Nutzer in eine bestimmte Richtung lenkt. Ein besonderes Merkmal ist der Parameter leadingIcon, mit dem Sie ein Symbol auf der linken Seite des Chips anzeigen lassen können. Das folgende Beispiel zeigt, wie Sie das umsetzen können:

@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

Diese Implementierung sieht so aus:

Infofeld für Filter

Für die zusammensetzbare Funktion FilterChip müssen Sie erfassen, ob der Chip ausgewählt ist. Im folgenden Beispiel wird gezeigt, wie Sie ein führendes Häkchensymbol nur dann einblenden, wenn der Nutzer den Chip ausgewählt hat:

@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

So sieht die Implementierung aus, wenn sie nicht ausgewählt ist:

So sieht die Option aus, wenn sie ausgewählt ist:

Eingabe-Chip

Mit der zusammensetzbaren Funktion InputChip können Sie Chips erstellen, die aus der Nutzerinteraktion resultieren. Wenn ein Nutzer beispielsweise in einem E‑Mail-Client eine E‑Mail schreibt, kann ein Eingabe-Chip einen Kontakt darstellen, den der Nutzer dem Feld „An:“ hinzugefügt hat.

Die folgende Implementierung zeigt einen Eingabe-Chip, der sich bereits im ausgewählten Zustand befindet. Der Nutzer schließt den Chip, indem er darauf tippt.

@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

Diese Implementierung sieht so aus:

Vorschlags-Chip

Das Composable SuggestionChip ist das einfachste der auf dieser Seite aufgeführten Composables, sowohl in Bezug auf die API-Definition als auch auf die gängigen Anwendungsfälle. Vorschlags-Chips enthalten dynamisch generierte Hinweise. In einer KI-Chat-App könnten Sie beispielsweise Vorschlagschips verwenden, um mögliche Antworten auf die letzte Nachricht zu präsentieren.

Sehen Sie sich diese Implementierung von SuggestionChip an:

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

Diese Implementierung sieht so aus:

Erhöhter Chip

In allen Beispielen in diesem Dokument werden die Basis-Composables verwendet, die ein flaches Erscheinungsbild haben. Wenn Sie einen Chip mit einem erhöhten Erscheinungsbild wünschen, verwenden Sie eines der drei folgenden Composables:

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

Zusätzliche Ressourcen

• Material UI-Dokumentation