Schalter
Beispiele
Im Abschnitt Verwendung finden Sie Informationen über das richtige Design eines Schalters und die verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.
Einfaches Beispiel
Ein Schalter ist eine Komponente, mit der ein Benutzer zwischen einem Ein- und einem Aus-Zustand wechseln kann.
<Switch label="Switch" />
Beispiel für OnChange
Sie können festlegen, dass eine Callback-Funktion ausgeführt wird, wenn ein Benutzer den Zustand eines Schalters ändert.
<Switch
label="Switch"
OnChange={(event, value) =>
console.log('Switch toggled. The value is now', value)
}
/>
Verwendung
Überblick
Ein Schalter ist eine Komponente, die zwischen zwei möglichen Zuständen wechselt: aktiv und inaktiv. Der Schalter wird für globale Optionen verwendet, z. B. auf Einstellungsseiten, wenn der Benutzer etwas ein- oder ausschalten muss.
Eine ausführliche Orientierungshilfe zur Verwendung dieser Komponente finden Sie im folgenden Entscheidungsbaum für UI-Komponenten.
Zu verwenden
Zum Umschalten eines Anwendungsstatus zwischen zwei Optionen wie ein/aus und aktiv/inaktiv. Achten Sie darauf, dass die Schalter sofort wirksam werden und keine weitere Aktion erfordern.
Nicht zu verwenden
- Für eine Wahr/Falsch-Auswahl innerhalb eines Formulars. Verwenden Sie stattdessen die Optionsfeldgruppe oder die Umschaltflächengruppe.
- Wenn zum Anwenden einer Einstellung eine Schaltfläche zu betätigen ist. Verwenden Sie stattdessen das Kontrollkästchen.
Formatierung
Aufbau
Der Schalter besteht aus den folgenden Elementen:
- Beschriftung: Prägnanter Text, der die spezifische Funktion oder die Einstellung der Schaltersteuerung beschreibt.
- Skala: horizontaler Pfad, auf dem die Benutzer den Ziehpunkt des Schalters verschieben.
- Ziehpunkt: Bewegliches Element, das die Benutzer entlang der Skala schieben können, um den Schalterstatus umzuschalten.
Platzierung von Beschriftungen
Die Beschriftung für den Schalter kann oben (Standard und empfohlen) oder links von der Eingabe selbst erscheinen.
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.
Beschriftungstext
Die Beschriftungen müssen deutlich machen, welche Funktion oder Einstellung der Schalter steuert, z. B. „Autom. speichern“.
Hilfetext
Schalter sind ein bekanntes Auswahlsteuerelement und bedürfen im Allgemeinen keiner zusätzlichen Erklärung. Das heißt, Sie müssen die Benutzer nicht anweisen, den Schalter „umzulegen“.
Verwenden Sie permanenten Hilfetext, wenn die Informationen für das Verständnis der Funktion des Schalters unerlässlich sind und immer sichtbar sein müssen.
Verhalten
Zustände
Der Schalter hat zwei Hauptzustände: abgewählt und angewählt.
| Bild | Zustand | Beschreibung |
|---|---|---|
 | Abgewählt | Zeigt den „Aus“-Zustand an. |
 | Ausgewählt | Zeigt den „Ein“-Zustand an. |
Zusätzlich zum abgewählten und angewählten Zustand verfügen Schalter auch über die Zustände Aktiviert, Schwebend, Aktiv, Fokussiert und Deaktiviert.
| Bild | Zustand | Beschreibung |
|---|---|---|
 | Aktiviert | Teilt dem Benutzer mit, dass das Element für die Interaktion aktiviert ist (Standardzustand). |
 | Schwebend | Zeigt an, dass der Benutzer den Mauszeiger auf dem Element positioniert hat. |
 | Aktiv | Gibt an, dass der Benutzer auf das Element klickt oder tippt. |
| Fokussiert | Zeigt an, dass der Benutzer das Element hervorgehoben hat, in der Regel über eine Eingabemethode wie eine Tastatur oder Sprachbefehl. Der Zustand „Fokussiert“ kann mit allen anderen Zuständen (einschließlich „Deaktiviert“) verwendet werden. |
 | Deaktiviert | Teilt dem Benutzer mit, dass das Element deaktiviert nicht interaktiv ist. Das Element ist ausgegraut. |
Interaktionen
Maus
Ein Benutzer interagiert mit einer Schalterkomponente, indem er mit der Maus darauf klickt, um zwischen ihrem Ein- und Aus-Zustand umzuschalten. Um den neuen Zustand anzuzeigen, ändern sich die Farbe der Skala und die Position des Ziehpunkts.
Tastatur
Die Schalterkomponente ist über die Tastatur fokussierbar. Die Space-Taste aktiviert und deaktiviert den Schalter.
Screenreader
Der Schalter hat den Typ „input“ und beinhaltet auch die aria-Rolle „switch“. Er leitet seinen barrierefreien Namen vom Wert der Textbezeichnung ab und schließt diesen Namen als Teil eines aria-label-Attributs ein. Wenn Sie den Wert der Beschriftung in Storybook ändern, ändert sich auch der aria-label-Wert. Der aria-checked-Wert wechselt je nach Status des Elements von „true“ zu „false“; diese Änderung wird von Screenreadern als „ein“ bzw. „aus“ ausgegeben.
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 diese Komponente in Ihrer Anwendung verwenden, stellen Sie sicher, dass der Beschriftungstext des Schalters aussagekräftig und verständlich ist.
Code
<Switch label="Switch" />
Importanweisung
import { Switch } 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
labelerforderlich- Beschreibung
The label associated with the switch field, also passed as a default value to 'aria-label'.
checked- Typ
booleanBeschreibungState of the switch. If set to
true, the switch is checked. Takes precedence overinitialChecked. If this prop is passed, the component works in controlled mode and its value will change only if this prop changes. className- Typ
stringBeschreibungCSS class name for this component.
disabled- Typ
booleanBeschreibungIf set to
true, the component is rendered in a disabled state. hideLabel- Typ
booleanBeschreibungIf set to
true, the label is not visible. initialChecked- Typ
booleanBeschreibungInitial checked state of the switch. If set to
true, the switch is checked. If thecheckedprop is specified along with this prop, this prop is discarded. labelPosition- Typ
'top' | 'left'BeschreibungAllows to select the label position.
Standardwert'top' onChange- Typ
function (React.ChangeEvent<HTMLInputElement>, boolean)BeschreibungCallback invoked when component value is changed.
Hooks
Für Switch sind keine Hooks verfügbar.
Übersetzungsschlüssel
Es gibt keine Übersetzungen für Switch.
Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.
Escape Hatches
Weitere Informationen finden Sie in unserer Dokumentation über Escape-Hatches.
10.5.0
Neue Komponente @jutro/components/new/Switch eingeführt.
Sie können die alte SwitchField-Komponente weiterhin aus @jutro/components/SwitchField importieren, erhalten dabei allerdings eine Warnung, dass sie verworfen wurde.