Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design eines Tags und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.
Sie können eine onClick-Funktion für ein Tag festlegen. Diese Funktion wird aufgerufen, wenn ein Benutzer auf das Symbol neben dem Tag-Text klickt.
<Taglabel="This is a tag"onClick={MakeToast}/>
Beispiel für ein klickbares Tag mit benutzerdefiniertem Symbol
Sie können ein Symbol festlegen, auf das ein Benutzer klicken kann, um eine Funktion auszuführen. Beachten Sie, dass das benutzerdefinierte Symbol nicht angezeigt wird, wenn keine onClick-Eigenschaft hinzugefügt wurde.
<Tag label="This is a tag" icon={CheckIcon} onClick={MakeToast}/
Ein Tag dient der Beschriftung und Kategorisierung von Elementen mit beschreibenden Schlüsselwörtern. Elemente können einzelne Tags oder eine Tag-Sammlung haben.
Tags sind nützlich für die schnelle Erkennung, die einfache Navigation und das Filtern von Elementen.
Beschriftung: Text, der das Tag identifiziert. Tags sollten immer Beschriftungen haben. Dabei kann es sich um Suchbegriffe oder Schlüsselwörter handeln.
Schließen-Symbol: das Symbol, auf das Benutzer klicken können, um das Tag zu entfernen.
Tag-Sammlung: eine Gruppe von mehr als einem Tag. Wenn ein Element mehr als ein Tag hat, wird es zu einer Tag-Sammlung.
Tags haben als möglichen Zustand „Aktiviert“, „Deaktiviert“, „Schwebend“, „Fokus“ und „Aktiv“:
Aktiviert: Teilt dem Benutzer mit, dass das Element für die Interaktion aktiviert ist (Standard). Aktivierte Tags weisen eine Hintergrundfarbe mit HEX # F0F3F6 auf.
Deaktiviert: Teilt dem Benutzer mit, dass das Element nicht interaktiv ist. Deaktivierte Tags weisen eine Hintergrundfarbe mit HEX # F9FAFB auf.
Schwebend: Zeigt an, dass der Benutzer den Mauszeiger über dem Element platziert hat (nur Desktop). Beim Schweben ist die Hintergrundfarbe der Tags HEX # E1E6EC.
Fokus: Gibt eine Rückmeldung darüber, dass der Benutzer das Element hervorgehoben hat, in der Regel über eine Eingabemethode wie eine Tastatur oder Maus. Im Fokus ist die Hintergrundfarbe der Tags HEX # F0F3F6, und das Tag wird von einem Strich mit HEX # A5D7EC umgeben.
Aktiv: Gibt eine Rückmeldung darüber, dass der Benutzer auf das Element klickt oder tippt. Aktive Registerkarten haben eine Hintergrundfarbe mit HEX # D1D9E2.
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.
Bei Verwendung der Tag-Komponente in Ihren Anwendungen:
Achten Sie darauf, dass der Tag-Text klar und prägnant ist.
Verwenden Sie zur Unterscheidung von Tag-Kategorien nicht nur Farbe.
Wenn Sie benutzerdefinierte Farben verwenden, stellen Sie sicher, dass die Mindestkontrastanforderungen erfüllt sind.
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.
