Umschaltflächengruppe
Beispiele
Im Abschnitt Verwendung finden Sie Informationen über das richtige Design einer Umschaltflächengruppe und die verschiedenen Konfigurationsoptionen, die wir bereitstellen.
Einfaches Beispiel
Eine einfache Umschaltflächengruppe besteht aus einer ToggleButtonGroup-Komponente mit einer Reihe von untergeordneten ToggleButton-Elementen.
<ToggleButtonGroup label="Toggle group">
<ToggleButton
label="Yes"
value="true"
/>
<ToggleButton
label="No"
value="false"
/>
</ToggleButtonGroup>
Beispiel für OnChange
Sie können die onChange-Eigenschaft verwenden, um eine Funktion auszuführen, wenn ein ToggleButton ausgewählt ist.
<ToggleButtonGroup
label="Toggle group"
onChange={(_, value) => console.log('Selected option is', value)}>
<ToggleButton
label="Yes"
value="true"
/>
<ToggleButton
label="No"
value="false"
/>
</ToggleButtonGroup>
Verwendung
Überblick
Die Umschaltflächengruppe ist ein Steuerelement, bei dem der Benutzer eine einzige Option aus einer Reihe von zwei bis vier sich gegenseitig ausschließenden Optionen auswählt. Diese Komponente besteht aus mehreren Umschaltflächen, wobei jeweils nur eine Schaltfläche aktiv oder ausgewählt ist.
Eine ausführliche Orientierungshilfe zur Verwendung dieser Komponente finden Sie im folgenden Entscheidungsbaum für UI-Komponenten.
Zu verwenden
- Wenn Benutzern 2 bis 4 einander ausschließende Optionen innerhalb eines Formulars präsentiert werden.
- Zum Umschalten zwischen Ansichten.
Nicht zu verwenden
- Wenn es mehr als 4 Optionen gibt, aus denen der Benutzer wählen kann. Verwenden Sie in diesem Fall die Dropdown-Auswahl oder die Combobox.
- Wenn es 3–4 Optionen in mobilen Anwendungen gibt. Verwenden Sie in diesem Fall die Optionsfeldgruppe.
- Wenn es nur eine auswählbare Option gibt. Verwenden Sie in diesem Fall ein einzelnes Kontrollkästchen.
Formatierung
Aufbau
Die Umschaltflächengruppe besteht aus den folgenden Elementen:
- Gruppenbeschriftung: Eine Beschriftung, die den Zweck der Umschaltflächengruppe beschreibt.
- Umschaltfläche: Eine einzelne Schaltfläche innerhalb der Umschaltflächengruppe, die eine auswählbare Option darstellt.
- Umschaltflächenbeschriftung: Die Textbezeichnung zur Beschreibung der mit der Umschaltfläche verknüpften Option.
Layout und Ausrichtung
Stellen Sie sicher, dass alle Umschaltflächenelemente die gleiche Breite aufweisen, um die visuelle Konsistenz und Bedeutung aufrechtzuerhalten.
Best Practices
Wenn Sie die Umschaltflächengruppe verwenden, um zwischen Ansichten zu wechseln, sollte die Umschaltaktion die Änderung sofort bewirken, ohne dass eine zusätzliche Aktion erforderlich ist.
Inhalt
Allgemeine Richtlinien fürs Schreiben
- Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
- Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
- Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
- Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
- Halten Sie Wörter und Sätze kurz.
Beschriftungen
Gruppenbeschriftung
Es ist zwar nicht zwingend erforderlich, eine übergeordnete Gruppenbeschriftung anzugeben, es wird jedoch dringend empfohlen. In Fällen, in denen der Kontext ausreicht, kann die Beschriftung undefiniert bleiben. Eine Umschaltflächengruppe ohne sichtbare Beschriftung sollte dennoch ein aria-label mit aria-label oder aria-labelledbyerhalten. Dieses aria-label vermittelt die kollektive Bedeutung aller Umschalter.
Umschaltflächenbeschriftungen
Die Umschaltflächenbeschriftungen sind obligatorisch. Jede Schaltfläche in der Umschaltgruppe muss über eine eindeutige beschreibende Textbeschriftung verfügen, damit sichergestellt ist, dass die Benutzer die verfügbaren Optionen verstehen. Halten Sie Beschriftungen aussagekräftig und sorgen Sie gleichzeitig für Eindeutigkeit. Verwenden Sie kurze, beschreibende Beschriftungen, die leicht zu erfassen und auf einen Blick zu verstehen sind.
Groß-/Kleinschreibung
Für Beschriftungstext wird die übliche Groß- und Kleinschreibung verwendet. Schreiben Sie den ersten Buchstaben des ersten Wortes in einem Satz oder einer Phrase immer groß.
Weitere Hinweise zum Implementieren der Groß- und Kleinschreibung finden Sie im Abschnitt zur Groß- und Kleinschreibung des UI-Textstyleguides.
Verhalten
Zustände
Umschaltflächen verhalten sich wie Schaltflächen, mit demselben interaktiven Status. Weitere Informationen finden Sie in der Dokumentation zu Schaltflächenkomponenten.
Interaktionen
Maus
Benutzer wählen eine Umschaltflächenoption aus, indem sie mit der Maus auf die gewünschte Schaltfläche klicken.
Die Benutzer können jeweils nur eine Umschaltfläche auswählen. Wenn ein Benutzer eine neue Auswahl trifft, wird die vorherige Auswahl automatisch aufgehoben.
Tastatur
Jede Schaltfläche kann über die Tastatur fokussiert werden. Verwenden Sie Tab und Shift+Tab, um zwischen Werten zu navigieren. Benutzer können jede Schaltfläche sowohl mit der Spacebar-Taste als auch mit der Enter-Taste auswählen.
Screenreader
Die Umschaltflächengruppe ist über das Attribut WAI-ARIA mit der Gruppenbeschriftung verknüpft: aria-labelledby. Das Attribut aria-pressed schaltet zwischen „true“ und „false“ um, um den Status jeder Schaltfläche anzugeben. Dies macht es blinden und sehbehinderten Benutzern einfacher, indem der Zweck der Umschaltfläche kommuniziert wird.
Barrierefreiheit
Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1 gemäß den Anforderungen der WCAG 2.1 AA. Nicht-textuelle Inhalte, die eine Bedeutung vermitteln müssen (z. B. Symbole und Sichtbarkeit des Tastaturfokus), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf. Alle Inhalte sind bis einschließlich 400 % sichtbar und funktionsfähig, ohne dass ein Scrollen in zwei Dimensionen erforderlich ist.
Diese Komponente wurde validiert, um die Zugänglichkeitsrichtlinien WCAG 2.1 AA zu erfüllen. Vom Autor des Inhalts vorgenommene Änderungen können sich jedoch auf die Konformität mit der Barrierefreiheit auswirken.
Wenn Sie die Komponente der Umschaltflächengruppe in Ihrer Anwendung verwenden:
- Stellen Sie sicher, dass jede Schaltfläche eine eindeutige und aussagekräftige Beschriftung hat.
- Warnen Sie die Benutzer, wenn die Auswahl einer Umschalter-Komponente eine Änderung des Kontexts zur Folge hat.
Code
<ToggleButtonGroup label="Toggle group">
<ToggleButton
label="Yes"
value="true"
/>
<ToggleButton
label="No"
value="false"
/>
</ToggleButtonGroup>
Importanweisung
import { ToggleButtonGroup, ToggleButton } from '@jutro/components/new';
Komponentenvertrag
Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.
Eigenschaften
ToggleButtonGroup-Eigenschaften
labelerforderlich- Beschreibung
Label associated with the
ToggleButtonGroup, also passed as a default value to 'aria-label'. className- Typ
stringBeschreibungCSS class name for this component.
disabled- Typ
booleanBeschreibungIf set to
true, the component is rendered in a disabled state. Note that whenToggleButtonGroupis disabled, allToggleButtonsinside group are disabled as well. displayOnly- Typ
booleanBeschreibungIf set to
true, displays the component value in plain text. hideLabel- Typ
booleanBeschreibungIf set to
true, the label is not visible. initialValue- Typ
stringBeschreibungInitially selected
ToggleButton, used when the component is controlled. labelPosition- Typ
'top' | 'left'BeschreibungPosition of the label, relative to the ToggleButtons inside the group.
name- Typ
stringBeschreibungThe name used to reference all
ToggleButtonsin the group, it's generated if not provided. onChange- Typ
function (React.ChangeEvent<HTMLInputElement>, string)BeschreibungCallback invoked when component value is changed.
required- Typ
booleanBeschreibungIf set to
true, displays an asterisk symbol next to the label. secondaryLabel- Beschreibung
Additional label associated with the
ToggleButtonGroup. tooltip- Typ
{ text: intlMessageShape, trigger: string } | intlMessageShapeBeschreibungText to be displayed in the tooltip or tooltip object that includes: text - to show tooltip content, trigger - to set tooltip trigger.
value- Typ
stringBeschreibungValue of the selected
ToggleButton, used when the component is not controlled.
ToggleButton-Eigenschaften
labelerforderlich- Beschreibung
Label associated with the
ToggleButton, also passed as a default value to 'aria-label'. valueerforderlich- Typ
stringBeschreibungValue when this
ToggleButtonis selected. className- Typ
stringBeschreibungCSS class name for this component.
Hooks
Für ToggleButtonGroup oder ToggleButton sind keine Hooks verfügbar
Übersetzungsschlüssel
Es gibt keine Übersetzungen für ToggleButtonGroup oder ToggleButton.
Escape Hatches
Weitere Informationen finden Sie in unserer Dokumentation über Escape-Hatches.
Änderungsprotokoll
10.9.0
icon Eigenschaftstyp erweitert
Der Typ der Eigenschaft icon für die verworfene Komponente @jutro/components/ToggleButton wurde auf string | React.ComponentType erweitert.
10.5.0
@jutro/components/new/ToggleButton und @jutro/components/new/ToggleButtonGroup werden hinzugefügt, @jutro/components/ToggleField wurde verworfen.
@jutro/components/new/ToggleButton verhält sich anders als die verworfene Komponente @jutro/components/ToggleField.Die Funktionalität der verworfenen Komponente @jutro/components/ToggleField wird durch die Komponente @jutro/components/new/ToggleButtonGroup ersetzt. ToggleButton-Komponenten werden als untergeordnete Elemente innerhalb von ToggleButtonGroup verwendet, um Schaltflächen in der Gruppe zu definieren.