Diese Seite wurde von der Cloud Translation API übersetzt.

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.

Ein Beispiel für jede der vier Chipkomponenten, wobei ihre einzigartigen Eigenschaften hervorgehoben werden. — **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:

Ein einfacher Assistenz-Chip. — **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:

Ein nicht ausgewählter Filter-Chip ohne Häkchen und mit einem Planhintergrund. — **Abbildung 3**: Nicht ausgewählter Filterchip.

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

Ausgewählter Filterchip mit Häkchen und farbigem Hintergrund. — **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.

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

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:

Weitere Informationen

Material UI-Dokumente