Chips ein-/ausblenden
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Ein ToggleChip ist ein spezieller Chip, mit dem Nutzer verschiedene Optionen auswählen können.
Ein/Aus-Chips enthalten eine zweistufige Ein/Aus-Schaltfläche. Beispiele für zweistufige Ein/Aus-Schaltflächen sind Schalter, Optionsfelder oder Kästchen. Verwenden Sie Ein/Aus-Chips für Situationen, in denen viele Optionen schnell und einfach festgelegt werden müssen, z. B. in den Einstellungen.
Anatomie
Ein/Aus-Chips haben vier Slots für zwei Textlabels, ein Auswahlsteuerelement und ein Anwendungssymbol. Das Symbol und das sekundäre Label sind optional.
A. Label
B. Sekundäres Label
C. Symbol
D. Auswahlsteuerung
E. Container
Farbverlauf der Chips ein-/ausschalten
Oben/links = 0% Oberfläche
Unten/Rechts = 50% Primär
(Farbverlauf-Overlays auf einem Hintergrund mit Oberflächenfarbe)
Auswahlsteuerung
Wechseln
Aktivieren oder deaktivieren Sie eine Auswahl mithilfe eines Schalters.
Optionsfeld
Verwenden Sie Optionsfelder in Listen, in denen der Nutzer nur eine Option auswählen kann.
Kästchen
Verwenden Sie Kontrollkästchen in Listen, in denen der Nutzer mehrere Optionen auswählen kann.
Chips zum Teilen ein-/ausblenden
Verwenden Sie die geteilten Chips, wenn Sie zwei antippbare Bereiche verwenden möchten.
Split-Umschaltchips
Der SplitToggleChip unterscheidet sich von dem umgeschalteten Chip, indem er zwei antippbare Bereiche hat, einen anklickbar und einen mit der Ein/Aus-Schaltfläche.
Bei der Option „Geteilte Ein/Aus-Schaltfläche“ können Sie zwischen dem antippbaren Hintergrundbereich und der Ein/Aus-Schaltfläche unterscheiden, indem Sie jedem Abschnitt eine andere Farbe zuweisen.
Nutzung
Verwende umgeschaltete Chips, wie in den folgenden Beispielen gezeigt.
Adaptive Layouts
Responsives Verhalten
Ein/Aus-Schaltfläche dehnt sich so aus, dass die verfügbaren Breite auf größeren Displays ausgefüllt wird.
Symbol (24 × 24 dp)
Container (52 × XX dp)
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-07-27 (UTC)."],[],[],null,["# Toggle chips\n\nA [ToggleChip](/reference/kotlin/androidx/wear/compose/material/package-summary#ToggleChip(kotlin.Boolean,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.wear.compose.material.ToggleChipColors,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,kotlin.Function0)) is a specialized chip that allows users to select various options. \nToggle chips include a bi-state toggle control. Some examples of a bi-state toggle control include a switch, radio button, or checkbox. Use toggle chips for situations in which many options may need to be quickly and easily set, such as in Settings.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\nToggle chips have four slots that accommodate two text labels, one selection control and one application icon. The icon and secondary label are optional.\n\n**A. Label\nB. Secondary label\nC. Icon\nD. Selection control\nE. Container**\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nToggle Chips Gradient\n---------------------\n\nTop/Left = 0% Surface \n\nBottom/Right = 50% Primary \n\n(Gradient overlays on a background of Surface color)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSelection control\n-----------------\n\n**Switch**\n\nUse a switch to turn a selection on or off.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Radio button**\n\nUse radio buttons in lists where the user can select only one option.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Checkbox**\n\nUse checkboxes in lists where the user can select multiple options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Split toggle chips**\n\nUse split toggle chips when you want two tappable areas.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nRelated components\n------------------\n\n**Split ToggleChips**\n\nThe SplitToggleChip differs from the ToggleChip by having two tappable areas, one clickable and one with the toggle. \n\n\nOn split toggle chips, differentiate between the tappable background area and the toggle control by making each section a different color.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nUse ToggleChips as shown in the following examples.\n\nAdaptive layouts\n----------------\n\n**Responsive behavior**\n\nToggleChips stretch to fill the available width on larger displays. \n\n\nIcon (24 x 24 dp) \n\nContainer (52 x XX dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
