Chip

Die Chip-Komponente ist ein kompaktes, interaktives UI-Element. Sie stellen komplexe Entitäten wie Kontakte oder Tags dar, oft mit einem Symbol und einem Label. Sie kann anklickbar, abwählbar oder ausblendbar sein.

Die vier Arten von Chips und ihre Verwendungsmöglichkeiten:

• Unterstützen: Der Nutzer wird bei einer Aufgabe unterstützt. Erscheint oft als temporäres UI-Element als Reaktion auf Nutzereingaben.
• Filter: Damit können Nutzer Inhalte anhand einer Reihe von Optionen eingrenzen. Sie können ausgewählt oder deaktiviert 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.
• Vorschlag: Bietet Nutzern Empfehlungen basierend auf ihren letzten Aktivitäten oder Eingaben. Sie werden in der Regel unter einem Eingabefeld angezeigt, um Nutzer zu Aktionen anzuregen.

Abbildung 1 Die vier Chipkomponenten.

API-Oberfläche

Es gibt vier Composeables, die den vier Chiptypen entsprechen. In den folgenden Abschnitten werden diese Composeables und ihre Unterschiede ausführlich beschrieben. Sie haben jedoch die folgenden gemeinsamen Parameter:

• label: Der String, der auf dem Chip angezeigt wird.
• icon: Das Symbol, das am Anfang des Chips angezeigt wird. Einige der speziellen Composeables haben einen separaten leadingIcon- und trailingIcon-Parameter.
• onClick: Der Lambda-Ausdruck, den der Chip aufruft, wenn der Nutzer darauf drückt.

Assistent-Chip

Mit dem AssistChip-Komposit können Sie ganz einfach einen Assistenz-Chip erstellen, der Nutzer in eine bestimmte Richtung lenkt. 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 dies 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:

Abbildung 2: Assistant-Chip

Infofeld für Filter

Für das FilterChip-Kompositelement müssen Sie erfassen, ob der Chip ausgewählt ist. Im folgenden Beispiel wird gezeigt, wie Sie ein Häkchensymbol nur anzeigen können, 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

Wenn diese Option nicht ausgewählt ist, sieht die Implementierung so aus:

Abbildung 3: Nicht ausgewählter Filterchip.

Wenn sie ausgewählt ist, sieht das so aus:

Abbildung 4: Ausgewählter Filterchip

Eingabe-Chip

Mit dem InputChip-Komposit können Sie Chips erstellen, die aus einer Nutzerinteraktion resultieren. Wenn ein Nutzer beispielsweise in einem E-Mail-Client eine E-Mail schreibt, kann ein Eingabechip eine Person darstellen, deren Adresse der Nutzer in das Feld „An:“ eingegeben hat.

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

Hinweis: Überlegen Sie, wie Sie einen solchen Chip im vorherigen E-Mail-Beispiel verwenden könnten, mit einem Namen, der für den Parameter text übergeben wird, und einer Funktion, die die erforderlichen Netzwerkaufrufe für onDismiss ausführt.

@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:

Abbildung 5. Eingabe-Chip.

Vorschlags-Chip

Das SuggestionChip-Komposit ist das grundlegendste der auf dieser Seite aufgeführten Komposite, sowohl in der API-Definition als auch in den gängigen Anwendungsfällen. Vorschlags-Chips enthalten dynamisch generierte Hinweise. In einer KI-Chat-App könnten Sie beispielsweise Vorschlags-Chips verwenden, um mögliche Antworten auf die letzte Nachricht anzuzeigen.

Betrachten Sie diese Implementierung von SuggestionChip:

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

Diese Implementierung sieht so aus:

Abbildung 6: Assistant-Chip

Hinweis: Die Vorschlags-Chip-Komponente ist zwar nur zu Informationszwecken gedacht, erfordert aber trotzdem ein onClick-Lambda, mit dem Sie Interaktivität schaffen können.

Erhöhter Chip

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

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

Weitere Informationen

• Material UI-Dokumente