Mit der Komponente Zeitauswahl können Benutzer eine Zeit aus einer Dropdown-Liste auswählen. Diese Komponente wird häufig in Versicherungsanwendungen verwendet, in denen Benutzer eine Uhrzeit angeben müssen, z. B. um einen Termin zu planen oder eine Erinnerung festzulegen.
Beschriftung: Beschreibt den Zweck des Eingabefelds.
Hilfetext (optional): Liefert zusätzlichen Kontext oder hilft dem Benutzer bei der richtigen Auswahl.
Dropdown-Eingabe: Zeigt die vom Benutzer ausgewählte Option an. Benutzer können in das Eingabefeld schreiben, um eine Option zu finden, die ihrer Abfrage entspricht. Sie können auch eine benutzerdefinierte Uhrzeit eingeben.
Dropdown-Menü: Zeigt eine Liste mit Zeitoptionen zur Auswahl an.
Die Komponente „Zeitauswahl“ kann sowohl ein 12-Stunden-Format als auch ein 24-Stunden-Format annehmen. Verwenden Sie das Format, das der Region entspricht, in der Ihr Produkt verfügbar ist. In den USA wird beispielsweise das 12-Stunden-Format verwendet.
In einem 12-Stunden-Zeitsystem ist der 24-Stunden-Tag in zwei Perioden unterteilt, „AM“ und „PM“, und jede Periode besteht aus 12 Stunden.
Das Format der Tagesperiodenmarkierung wird durch das Gebietsschema des Benutzers bestimmt. Entwickler haben keine Kontrolle darüber. Für das Gebietsschema „en-US“ wird die Tagesperiodenmarkierung standardmäßig mit „AM“ und „PM“ geschrieben.
Das Format der „Tagesperiodenmarkierung“ wird durch das Gebietsschema des Benutzers bestimmt. In diesem Beispiel wird das Gebietsschema „en-US“ verwendet.
Jutro unterstützt Dropdown-Menüs mit Eingabefeldern mit Autovervollständigung. Benutzer können manuell Text eingeben, um die Dropdown-Elemente zu filtern. Diese Funktion ist hilfreich, um Benutzern die Auswahl aus einer langen Liste zu erleichtern.
In Dropdown-Menüs mit aktivierter Autovervollständigung werden Einträge vorgeschlagen, wenn Benutzer mit der Eingabe beginnen. Die Auswahl wird basierend auf den eingegebenen Zeichen angezeigt. Je mehr Zeichen der Benutzer im Feld eingibt, desto detaillierter wird die Liste.
Eine Zeitauswahl kann ein Eingabesteuerelement für die Zeitzone enthalten. Die Zeitzonenauswahl unterstützt auch die Autovervollständigungsfunktion, die es Benutzern ermöglicht, durch die Liste der Optionen zu filtern.
Positionieren Sie eine deutlich sichtbare Beschriftung außerhalb des Eingabefeldes. Ein Eingabefeld ohne Beschriftung ist mehrdeutig und nicht barrierefrei.
Positionieren Sie eine dauerhafte Beschriftung außerhalb des Felds.
Verwenden Sie keinen Platzhaltertext als Ersatz für die Beschriftung.
Fügen Sie keinen Platzhaltertext in das Eingabefeld ein. Platzhaltertext belastet das Kurzzeitgedächtnis der Benutzer, da er nach der Eingabe eines Werts verschwindet. Auch für Benutzer mit vermindertem Sehvermögen und kognitiven Beeinträchtigungen stellt er eine zusätzliche Belastung dar.
Positionieren Sie Hinweise und Anweisungen, einschließlich Formatierungsbeispiele und -anforderungen, stattdessen außerhalb des Felds.
Das Eingabefeld für die Zeitauswahl richtet sich nach den Inhaltsrichtlinien für Textfelder.
Der Text der Fehlermeldung erklärt dem Benutzer, wie er den Fehler beheben kann. Im Falle der Zeitauswahl hängen die Fehler oft mit etwas zusammen, das für die Inline-Validierung korrigiert werden muss.
Ungültige Felder müssen deutlich gekennzeichnet werden. Legen Sie bei Auswahlwerkzeugen mit mehr als einem Feld den ungültigen Status für das einzelne Feld fest, das den Fehler auslöst.
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.
Die Zeitauswahl erscheint ohne Wert (Standard), mit Platzhaltertext oder mit vorausgefüllter Eingabe.
Visualisierung
Zustand
Beschreibung
Kein Wert (Standard)
Zeigt dem Benutzer an, dass kein Wert ausgewählt wurde und kein Platzhalter vorhanden ist.
Platzhalter
Zeigt dem Benutzer an, dass kein Wert ausgewählt wurde. Der Platzhalter ist ausgegraut.
Vorausgefüllte Eingabe
Gibt für den Benutzer an, dass die Eingabe mit Daten vorausgefüllt ist.
Die Zeitauswahl verfügt auch über interaktive Zustände für Aktiviert, Fokussiert, Deaktiviert, Fehler, Schreibgeschützt und Nur Anzeigen.
Zustand
Beschreibung
Aktiviert
Zeigt dem Benutzer an, dass das Element für die Interaktion aktiviert ist.
Fokussiert
Zeigt dem Benutzer an, auf welchem UI-Element im System der Fokus liegt.
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.
Fehler
Zeigt an, dass der Benutzer einen Fehler bei der Validierung gemacht hat. Der Fehlertext gibt dem Benutzer 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.
Dieser Zustand wurde zuvor als „Schreibgeschützt“ bezeichnet.
Die folgende Abbildung stellt die interaktiven Zustände der Zeitauswahl dar.
Die Zeitauswahl wird mit der LEERTASTE erweitert und reduziert. Benutzer navigieren mit den Pfeiltasten durch die Optionen und wählen mit der Leertaste oder der Eingabetaste eine Option aus.
aria-labelledby stellt eine programmgesteuerte Verknüpfung zwischen dem Eingabefeld und seiner Beschriftung her. Das WAI-ARIA-Attribut aria-autocomplete='list' gibt an, dass eine Auswahlliste angezeigt wird, aus der der Benutzer eine Option auswählen kann, das Bearbeitungsfeld jedoch den Fokus behält. Wenn in Storybook die Option „required“ ausgewählt wird, werden die Attribute „required“ und „aria-required="true"“ zum Eingabefeld hinzugefügt.
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.
Bei Verwendung dieser Komponente in Ihren Anwendungen:
Geben Sie die Formatierungsanforderungen klar an.
Vermeiden Sie die Verwendung von Platzhaltertext.
Verwenden Sie aussagekräftige Texte für Fehlertexte.
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.
Die TimePicker-Komponente definiert einen Übersetzungsschlüssel:
Schlüssel
Verwendet für
jutro-components.fields.TimePicker.placeholder
Der Platzhalter im Eingabefeld.
Diese TimezonePicker-Komponente definiert einen Übersetzungsschlüssel für jede verfügbare Zeitzone. Der Schlüssel beginnt immer mit jutro-components.fields.TimezonePicker, gefolgt vom Namen der Zeitzone.
Für die Zeitzone Africa/Lagos lautet die Übersetzungsschlüssel-ID beispielsweise:
Die Uhrzeit wird entsprechend dem ausgewählten Gebietsschema formatiert. Ist das Gebietsschema beispielsweise en-US, wird die Uhrzeit als „5:30 PM“ formatiert. Wenn das Gebietsschema pl-PL ist, wird die Uhrzeit als „17:30“ formatiert.
Die Jutro-Eingaben haben imperative Handler als Mechanismus implementiert, um Zugang zu einigen gängigen nativen Funktionen zu bieten, die für Sie nützlich sein könnten. Die folgenden Funktionen sind verfügbar:
Fokus setzen ermöglicht es, den Fokus des Benutzers auf eine bestimmte Komponente zu setzen.
Fokus aufheben ermöglicht es, den Fokus von der Komponente zu entfernen.
Zur Komponente scrollen ermöglicht es, den Benutzer zu einem bestimmten Bereich der Seite zu führen.
Diese Funktionen werden über die ref-Eigenschaft bereitgestellt, die sie wie folgt verfügbar macht:
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.
Wenn der Benutzer eine ungültige Zeit eingibt oder eine Zeit, die außerhalb der Min/Max-Grenzen liegt, erhält er einen Validierungsfehler als dritten Parameter im onChange-Handler. Die Parameter sehen wie folgt aus:
{ errorCode:ERROR.<ERROR_CODE_GOES_HERE>, }
The error code can be one of the following:
INVALID_TIME - when the user enters an invalid time, for example "25:67 AM".
MIN_TIME_EXCEEDED - when the user enters a time that is before minTime.
MAX_TIME_EXCEEDED - when the user enters a time that is after maxTime.
Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer Zeitauswahl und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.
Sie können es dem Benutzer ermöglichen, mithilfe der TimePicker-Komponente eine Zeit auszuwählen. Verwenden Sie dann den Handler, um die ausgewählte Zeit abzurufen.
import{TimePicker}from'@jutro/components/new'; exportfunctionDinnerTimeSelector(){ functionhandleTimeChange(event, value){ console.log('The user selected the following time for dinner:', value); // displays: { hours: 19, minutes: 30 } } return( <TimePicker label={{ id:'time-picker-label', defaultMessage:'Enter dinner time', }} name="Dinner time picker" onChange={handleTimeChange} /> ); }
Sie können dem Benutzer erlauben, eine Zeit und eine Zeitzone mithilfe der TimePicker- und TimezonePicker-Komponenten auszuwählen. Verwenden Sie dann die Handler, um die ausgewählte Zeit und Zeitzone zu erhalten.
import{TimePicker,TimezonePicker}from'@jutro/components/new'; exportfunctionDinnerTimeSelector(){ functionhandleTimeChange(event, value){ console.log('The user selected the following time for dinner:', value); // displays: { hours: 19, minutes: 30 } } functionhandleTimezoneChange(event, value){ console.log('The user selected the following timezone for dinner:', value); // displays: { timezone: 'Europe/Warsaw' } } return( <> <TimePicker label={{ id:'time-picker-label', defaultMessage:'Enter dinner time', }} name="Dinner time picker" onChange={handleTimeChange} /> <TimezonePicker label={{ id:'timezone-picker-label', defaultMessage:'Set timezone for dinner time', }} initialValue={{timezone:'Europe/Warsaw'}} onChange={handleTimezoneChange} /> </> ); }
Sie können die Zeitauswahl steuern, indem Sie die value-Eigenschaft übergeben. Dies ist nützlich, wenn Sie die Zeitauswahl als gesteuerte Komponente verwenden möchten.
Aus folgendem Grund ist es am besten, die Intl.DateTimeFormat-API zu verwenden, um den Wert der Zeitauswahl zu formatieren:
Jedes Mal, wenn toLocaleString aufgerufen wird, muss eine Suche in einer großen Datenbank mit Lokalisierungszeichenfolgen durchgeführt werden, was potenziell ineffizient ist. Wenn die Methode viele Male mit denselben Argumenten aufgerufen wird, ist es besser, ein Intl.DateTimeFormat-Objekt zu erstellen und dessen format()-Methode zu verwenden, denn ein DateTimeFormat-Objekt merkt sich die ihm übergebenen Argumente und kann entscheiden, einen Teil der Datenbank zwischenzuspeichern, sodass künftige Formataufrufe in einem eingeschränkteren Kontext nach Lokalisierungszeichenfolgen suchen können.
Sie können die Zeitzonenauswahl steuern, indem Sie die value-Eigenschaft übergeben. Dies ist nützlich, wenn Sie die Zeitzonenauswahl als gesteuerte Komponente verwenden möchten.
Aufbau der Zeitauswahlkomponente.
Das Format der „Tagesperiodenmarkierung“ wird durch das Gebietsschema des Benutzers bestimmt. In diesem Beispiel wird das Gebietsschema „en-US“ verwendet.
