Die Komponente stepper ermöglicht es den Benutzern, einen numerischen Wert inkrementell zu erhöhen oder zu verringern. Benutzer können numerische Werte auch direkt in das Eingabefeld eingeben.
Für numerische Parameter mit einem eindeutigen Standardwert, den die meisten Benutzer wahrscheinlich auswählen werden.
Zum Anpassen numerischer Felder um einen kleinen diskreten Betrag von nicht mehr als 10 Erhöhungs- oder Verringerungsschritten. Sie können den Stepper beispielsweise verwenden, um die Anzahl der Insassen in einem Fahrzeug oder die Anzahl der zu erstellenden Kopien zu ändern.
Wenn häufige große Abweichungen vom Standardwert zu erwarten sind.
Zur Auswahl eines einzelnen Wertes oder eines Wertebereichs aus einem festen Satz von Optionen. Verwenden Sie stattdessen den Schieberegler.
Für kontinuierliche Variablen wie Alter, Größe, Preis oder Entfernung. Verwenden Sie die Zahleneingabe, um den genauen Wert innerhalb eines großen Bereichs anzugeben.
Beschriftung: Gibt an, welchen Wert der Stepper ändert, z. B. die Anzahl der Passagiere.
Schaltfläche „Verringern“: Diese Schaltfläche dient zum Verringern des Wertes. Der Wert wird um 1 verringert, wenn ein Benutzer auf die Schaltfläche klickt.
Wert: Der aktuelle Wert, der ausgewählt oder vorgegeben wurde. Die Benutzer haben die Möglichkeit, einen numerischen Wert manuell einzugeben, indem sie in das Texteingabefeld klicken.
Schaltfläche „Erhöhen“: Diese Schaltfläche dient zum Erhöhen des Wertes. Der Wert wird um 1 erhöht, wenn ein Benutzer auf die Schaltfläche klickt.
Positionieren Sie eine deutlich sichtbare Beschriftung außerhalb des Stepper-Eingabefeldes. Der Beschriftungstext erklärt den Zweck des Steppers und bietet dem Benutzer einen Kontext. Ein Eingabefeld ohne Beschriftung ist mehrdeutig und nicht barrierefrei.
Note: Die label-Eigenschaft ist für die Stepper-Komponente obligatorisch. Wenn Sie nicht möchten, dass die Beschriftung sichtbar ist, können Sie hideLabel = true unter der label-Eigenschaft einfügen.
Positionieren Sie eine dauerhafte Beschriftung außerhalb des Felds.
Gehen Sie nicht davon aus, dass das Feld ohne Beschriftung selbsterklärend ist.
Der Text der Fehlermeldung erklärt dem Benutzer, wie er den Fehler beheben kann. Beim Stepper hängen Fehler häufig mit ungültigen Daten oder einem nicht ausgefüllten Pflichtfeld zusammen.
Verwenden Sie für Fehlertext die übliche Groß- und Kleinschreibung. Schreiben Sie 1 bis 2 kurze, vollständige Sätze, die mit einem Punkt enden.
Verwenden Sie Fehlermeldungstexte, um den Benutzer anzuleiten und ihm eine Lösung aufzuzeigen.
Schreiben Sie keine zweideutigen Fehlermeldungen und lassen Sie die Benutzer nicht im Unklaren darüber, wie ein Problem zu lösen ist.
Markieren Sie erforderliche Felder mit einem Sternchen (*). Das Sternchen steht vor der Feldbeschriftung. Benutzer können so leicht herausfinden, welche Felder erforderlich sind, indem sie nur das Zeichen ganz links in der Beschriftung prüfen.
Zusätzlich zur Markierung erforderlicher Felder mit einem Sternchen wird empfohlen, klare Anweisungen am oberen Rand des Formulars einzufügen, z. B. „Alle mit einem Sternchen gekennzeichneten Felder sind Pflichtfelder“, um sicherzustellen, dass die Benutzer die Bedeutung des Sternchens verstehen.
Verwenden Sie ein Sternchen, um anzuzeigen, dass ein Feld ein Pflichtfeld ist.
Verwenden Sie kein Sternchen, um optionale Elemente zu kennzeichnen.
Das Stepper-Feld weist die folgenden Zustände auf: aktiviert, deaktiviert, fokussiert, Fehler, schreibgeschützt und nur anzeigen.
Stepper-Steuerelemente verwenden Symbolschaltflächen. Weitere Informationen über die Zustände von Symbolschaltflächen finden Sie in der Dokumentation zu den Schaltflächenzuständen.
Zustand
Beschreibung
Aktiviert (Standard)
Teilt dem Benutzer mit, dass das Element für die Interaktion aktiviert ist.
Deaktiviert
Zeigt dem Benutzer an, dass der Eingabewert aufgrund lokaler Faktoren nicht geändert werden kann. Zum Beispiel muss ein Kontrollkästchen über dem Eingabefeld aktiviert sein, um auf dieses Eingabefeld zuzugreifen. Der Benutzer kann durch Interaktion mit der Seite eine Aktion zur Aktivierung durchführen.
Fokussiert
Zeigt an, dass der Benutzer das Element hervorgehoben hat, in der Regel über eine Eingabemethode wie eine Tastatur oder Sprachbefehl.
Fehler
Zeigt an, dass der Benutzer einen Fehler bei der Validierung gemacht hat. Eine Validierungsbeschriftung gibt Benutzern eine korrigierende Rückmeldung.
Schreibgeschützt
Zeigt dem Benutzer an, dass der Eingabewert aufgrund externer Faktoren nicht geändert werden kann. Beispiel: fehlender Schreibzugriff. Der Benutzer kann Maßnahmen zur Aktivierung ergreifen, indem er sich z. B. an einen Administrator wendet.
Nur Anzeige
Der Zustand „Nur Anzeige“ wird in zwei Fällen verwendet:
Ein UI-Element wird im Anzeigemodus verwendet.
Ein UI-Element wird im Bearbeitungsmodus angezeigt, ist aber nie bearbeitbar.
Die Benutzer können einen numerischen Wert manuell eingeben, indem sie in das Texteingabefeld klicken. Sie können den Wert auch inkrementell erhöhen oder verringern, indem sie auf das Symbol „Addieren“ oder „Subtrahieren“ klicken.
Jedes Element in der Jutro-Stepper-Komponente ist Tabulator-indiziert und kann somit über die Tab-Taste aufgerufen werden. Die Werte können mit der Leertaste und der Eingabetaste erhöht oder verringert werden. Der Wert innerhalb des Eingabefeldes kann auch explizit mit den Cursor-Pfeiltasten oder durch manuelle Eingabe des Wertes festgelegt werden.
Die Plus- und Minuswert-Schaltflächen enthalten jeweils ein aria-label-Attribut „Wert erhöhen“ bzw. „Wert verringern“. Diese können in Storybook in den messageProps-Feldern geändert werden. Das Eingabefeld nutzt aria-live="polite", um blinden Menschen seinen Wert zu vermitteln, und es wird über aria-labelledby mit dem Beschriftungstext der Komponente verknüpft.
Legen Sie den am häufigsten ausgewählten Wert als Stepper-Standard fest. Beispielsweise ist 1 in der Regel die Standardanzahl von Erwachsenen für die Buchung eines Hotelzimmers, während 0 die Standardanzahl von Kindern bei einer Hotelreservierung sein kann.
Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.
Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.
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.
If set to true, displays the component value in plain text. Consider using readonly instead, if possible, because plain text is worse for accessibility than readonly inputs.
Value of input. Takes precedence over initialValue. If this prop is passed, component works in controlled mode and its value will change only if this prop changes.
Obwohl die Eigenschaften min und max zur Einschränkung der Werte verwendet werden können, die mit den Schaltflächen (+) und (-) in der Komponente eingestellt werden können, gibt es 3 verschiedene Möglichkeiten, wie die Stepper-Komponente einen Wert außerhalb dieser Grenzen einstellen kann:
Eigenschaften initialValue oder value: Diese Eigenschaften können jede beliebige Zahl annehmen. Wenn die angegebene Zahl außerhalb der festgelegten Grenzen liegt, wird sie trotzdem verwendet.
Manuelle Benutzereingabe: Der Benutzer kann jede beliebige Zahl eingeben, auch wenn sie außerhalb der festgelegten Grenzen liegt
Falls ein initialValue-Wert oder ein manuell eingegebener Wert außerhalb der Grenzwerte liegt, führt die Stepper-Komponente folgende Aktion durch:
Deaktiviert die Schaltfläche (+), wenn der Wert über dem Wert der max-Eigenschaft liegt
Deaktiviert die Schaltfläche (-), wenn der Wert unter dem Wert der min-Eigenschaft liegt
Setzt den Wert auf min oder die festgelegten Höchstwerte, wenn die entsprechende Schaltfläche angeklickt wird
Obwohl einige Jutro-Komponenten ergänzende Funktionen oder eine Hilfsfunktion zur Erleichterung des Validierungsprozesses bereitstellen, liegt es in Ihrer Verantwortung als Entwickler, die Validierung von Benutzereingaben (mit oder ohne Verwendung der ergänzenden Hilfsfunktionen) durchzuführen und zu entscheiden, welche Fehlermeldungen angezeigt werden sollen.
Das Verhalten von Jutro-Komponenten hängt von der Implementierung durch den Entwickler ab.
Wann werden Fehlermeldungen angezeigt?
Fehlermeldungen werden nur angezeigt, wenn Sie sie über die Eigenschaft stateMessages an die Komponente übergeben. Diese Eigenschaft empfängt ein Objekt mit dem folgenden Inhalt:
Die Komponente zeigt alle bereitgestellten Fehlermeldungen in der gleichen Reihenfolge wie im Array an.
Wann erfolgt die Validierung?
Dies ist Ihre Entscheidung als Entwickler. Da die Komponenten nicht festlegen, wann die Validierung durchgeführt wird oder wann der Fehler angezeigt werden muss, müssen Sie die Logik für die Behandlung entsprechend den Projektanforderungen implementieren, z. B. während der Benutzer den Inhalt bearbeitet, wenn die Komponente den Fokus verliert und bei der Formularübermittlung.
Im Abschnitt Verwendung finden Sie Informationen über das richtige Design eines Steppers und die verschiedenen Konfigurationsoptionen, die wir bereitstellen.
Sie können dem Benutzer erlauben, mithilfe der Stepper-Komponente eine Zahl einzugeben. Verwenden Sie dann den Handler, um die ausgewählte Zahl abzurufen.
Stepper stellt keine spezielle Validierungslogik zur Verfügung, bietet aber die Möglichkeit, die Validierung durch den Entwickler einzubeziehen und die stateMessages-Eigenschaft zur Anzeige der erforderlichen Fehlermeldung zu verwenden.
Dies ist ein Beispiel für die Handhabung der Validierung, wenn ein onChange-Ereignis ausgelöst wird. Geben Sie einen Wert unter 0 oder über 10 ein, ohne die Schaltflächen zum Testen zu verwenden.
exportfunctionStepperValidation(){ const[validationMessages, setValidationMessages]=useState({}); const max =10; const min =0; const onChange =useCallback((e, newValue)=>{ setValidationMessages({}); if(newValue &&(newValue > max || newValue < min)){ setValidationMessages({ error:['Value must be between 0 and 10'], }); } },[]); return( <Stepper label="Enter Number" secondaryLabel="From 1 to 10 inclusive" onChange={onChange} stateMessages={validationMessages} min={min} max={max} /> ); }
