Chip

Die Komponente „Chip“ ist ein kompaktes, interaktives UI-Element. Sie stellt komplexe Entitäten wie Kontakte oder Tags dar, oft mit einem Symbol und einem Label. Sie kann überprüfbar, schließbar oder anklickbar sein.

Es gibt vier Arten von Chips und wo Sie sie verwenden können:

• Assistent: Hiermit wird der Nutzer durch eine Aufgabe geführt. Wird häufig als temporäres UI-Element als Reaktion auf Nutzereingaben angezeigt.
• Filter: Damit können Nutzer die Inhalte anhand einer Reihe von Optionen eingrenzen. Sie können ausgewählt oder deaktiviert werden. Wenn sie ausgewählt sind, enthalten sie möglicherweise ein Häkchen.
• Eingabe: Stellt von Nutzern bereitgestellte Informationen dar, z. B. Auswahlen in einem Menü. Sie können ein Symbol und Text sowie ein „X“ zum Entfernen enthalten.
• Suggestion: Stellt dem Nutzer Empfehlungen auf der Grundlage seiner letzten Aktivitäten oder Eingaben bereit. Sie werden normalerweise unter einem Eingabefeld angezeigt, um Nutzer zu Aktionen aufzufordern.

API-Oberfläche

Es gibt vier zusammensetzbare Funktionen, die den vier Arten von Chips entsprechen. In den folgenden Abschnitten werden diese zusammensetzbaren Funktionen 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 Chips angezeigt wird. Einige der spezifischen zusammensetzbaren Funktionen haben einen separaten leadingIcon- und einen separaten trailingIcon-Parameter.
• onClick: Lambda, das der Chip aufruft, wenn der Nutzer sie drückt.

Unterstützungs-Chip

Die zusammensetzbare Funktion AssistChip bietet eine einfache Möglichkeit, einen Unterstützungs-Chip zu erstellen, der den Nutzer in eine bestimmte Richtung bewegt. Ein Unterscheidungsmerkmal ist der Parameter leadingIcon, mit dem Sie ein Symbol auf der linken Seite des Chips anzeigen können. Das folgende Beispiel zeigt, wie Sie es implementieren 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 prüfen, ob der Chip ausgewählt ist. Das folgende Beispiel zeigt, wie ein Häkchensymbol nur dann angezeigt werden kann, 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

Diese Implementierung sieht wie folgt aus, wenn sie nicht ausgewählt ist:

Bei Auswahl wird Folgendes angezeigt:

Eingabe-Chip

Mit der zusammensetzbaren Funktion InputChip können Sie Chips erstellen, die aus Nutzerinteraktionen resultieren. Wenn der Nutzer in einem E-Mail-Client beispielsweise eine E-Mail schreibt, kann ein Eingabe-Chip eine Person darstellen, deren E-Mail-Adresse der Nutzer in das Feld „An:“ eingegeben hat.

Die folgende Implementierung zeigt einen Eingabe-Chip, der sich bereits in einem ausgewählten Zustand befindet. Der Nutzer schließt den Chip, wenn er darauf drückt.

@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

Die zusammensetzbare Funktion SuggestionChip ist sowohl in ihrer API-Definition als auch in den häufigsten Anwendungsfällen die grundlegendste der auf dieser Seite aufgeführten zusammensetzbaren Funktionen. Vorschlags-Chips enthalten dynamisch generierte Hinweise. In einer KI-Chat-App können Sie beispielsweise Vorschlags-Chips verwenden, um mögliche Antworten auf die neueste Nachricht darzustellen.

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 dieses Dokuments werden die zusammensetzbaren Basisfunktionen verwendet, die ein flaches Aussehen haben. Wenn Sie einen Chip mit einem erhöhten Aussehen möchten, verwenden Sie eine der drei folgenden zusammensetzbaren Funktionen:

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

Zusätzliche Ressourcen

• Material-UI-Dokumente