Infobeschriftung
Beispiele
Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer InfoLabel-Komponente und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.
Einfaches Beispiel
Eine einfache Beschriftung ist Text in einem farbigen Oval.
<InfoLabel>Lorem ipsum</InfoLabel>
Beispiel mit Symbol
Sie können einer Beschriftung ein Symbol hinzufügen. Eine Aufstellung der Optionen finden Sie in der Liste der Symbole. Anweisungen zum Hinzufügen eines benutzerdefinierten Symbols finden Sie auf der Seite der Icon-Komponente.
<InfoLabel icon="gw-star">Lorem ipsum</InfoLabel>
Beispiele für Infobeschriftungstypen
Mit einer der Typoptionen können Sie die Farbe und Formatierung der Beschriftung ändern.
<InfoLabel type="notification type">Lorem ipsum</InfoLabel>
Verwendung
Überblick
Die Beschriftung „Information“ ist eine nicht interaktive Komponente, die den Status eines Elements visuell anzeigt. Die Beschriftungskomponente „Information“ wird häufig im Kontext einer Karten-, Tabellen- oder Listenansicht angezeigt.
Zu verwenden
Zeigt den Status eines Elements in der Benutzeroberfläche an. Verwenden Sie die Beschriftung info für nicht numerische Statusinformationen.
Nicht zu verwenden
- Zum Anzeigen von Informationen zu neuen oder aktualisierten Inhalten als numerischer Wert. Verwenden Sie stattdessen den Badge .
- Zum Kategorisieren von Elementen und Filtern von Daten. Verwenden Sie stattdessen Tags.
Formatierung
Aufbau
Eine Infobeschriftung besteht aus den folgenden Elementen:
- Container mit einer bestimmten, vom Anwendungsfall abhängigen Farbfüllung.
- Textbeschriftung, die Statusinformationen übermittelt.
- Optionales Symbol, um die Textbeschriftung optisch zu unterstützen und mehr Kontext zum Statustyp zu liefern.
Typen
Info label status types
Infobeschriftungen sind in verschiedenen Farben gehalten, die eine bestimmte Bedeutung haben.
Erfolg
Verwenden Sie den Beschriftungstyp success, um einen konstruktiven Status darzustellen. Zum Beispiel: „erfolgreich“, „aktiv“, „auf“, „verfügbar“, „abgeschlossen“, „angewendet“, „bestätigt“, „gelöst“ oder „hinzugefügt“.
Fehler
Verwenden Sie den Beschriftungstyp error, um einen kritischen Status darzustellen. Zum Beispiel: „Fehler“, „nicht angewendet“, „angehalten“, „fehlgeschlagen“ oder „abgelehnt“.
Warnung
Verwenden Sie den Beschriftungstyp warning, um auf mögliche Probleme mit einem Vorgang hinzuweisen. Zum Beispiel: „Warnung“, „blockiert“ oder „Zeitüberschreitung“.
Info
Verwenden Sie den Beschriftungstyp info, um einen in Bearbeitung befindlichen oder aktuellen Status darzustellen. Zum Beispiel: „in Bearbeitung“, „offen“ oder „geändert“.
Neutral
Verwenden Sie den Beschriftungstyp neutral, um einen allgemeinen Status oder einen inaktiven Status zu kommunizieren. Der neutrale Beschriftungstyp stellt einen Standard- oder einen passiven Zustand dar. Dadurch eignet es sich für Szenarien, in denen keine bestimmte Aktion erforderlich ist. Zum Beispiel: „inaktiv“, „leer“, „zu erledigen“, „nicht verfügbar“ oder „nicht gestartet“.
Symbole und Platzierung
Infobeschriftungen können auch Symbole enthalten, um den Status eines Elements zu verdeutlichen. Die Symbole können links oder rechts vom Text platziert werden.
Best Practices
- Verwenden Sie eine klare Beschriftung mit kurzem und scanbarem Text.
- Verwenden Sie Symbole, um gleichfarbige Infobeschriftungen zu unterscheiden oder um zusätzliche visuelle Informationen zu liefern.
- Überladen Sie die Benutzeroberfläche nicht mit Infobeschriftungen. Das wirkt ihrem Zweck zuwider. Eine Infobeschriftung soll den Status eines Elements zur schnellen Erkennung hervorheben.
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.
Eine Beschriftung einfügen
Die Komponente InfoLabel muss immer eine Textbeschriftung enthalten.
Halten Sie die Beschriftung kurz und klar. Verwenden Sie entweder eine Ein-Wort-Statusbezeichnung, z. B. „Fehler“, oder eine Statusbezeichnung aus zwei Wörtern, z. B. „Berechtigungsfehler“.
Schreiben Sie das erste Wort und Substantive groß.
In Statusbeschriftungen werden das erste Wort und Substantive großgeschrieben.
Weitere Informationen zum Implementieren der Groß- und Kleinschreibung finden Sie im UI-Textstyleguide.
Verhalten
Interaktionen
InfoLabel ist eine nicht interaktive Komponente. Sie kann nicht angeklickt oder verworfen werden.
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.
Bei Verwendung dieser Komponente in Ihren Anwendungen:
- Fügen Sie immer eine Textbeschriftung ein, damit Benutzer den Status besser erkennen können. Verlassen Sie sich nicht nur auf die Farbe, um Informationen zu vermitteln.
- Verwenden Sie Infobeschriftungen nicht für langen Text.
Code
<InfoLabel>Lorem ipsum</InfoLabel>
Importanweisung
import { InfoLabel } from '@jutro/components';
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
children- Beschreibung
The children elements to render inside the InfoLabel.
className- Typ
stringBeschreibungCSS class name for this component.
icon- Typ
string | IconBeschreibungAn Icon component to render on the component. The value must be an
Iconcomponent or the icon's name. For example,CheckIconor'gw-check'. iconPosition- Typ
'left' | 'right'BeschreibungWhere the icon is placed relative to the text.
type- Typ
'success'| 'error' | 'warning' | 'info' | 'neutral'BeschreibungPhrase allowing to set custom flavor (success, info, neutral, etc.).
idVerworfen- Typ
stringBeschreibungUnique identifier for the component.
messageVerworfen- Beschreibung
Label message that is either a string or an object representing internationalized message
({id: key, defaultMessage: default text})will be shown when children are not provided.
Hooks
Für Info label sind keine Hooks verfügbar.
Übersetzungsschlüssel
Es gibt keine Übersetzungen für Info label.
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.
Änderungsprotokoll
10.9.0
icon Eigenschaftstyp erweitert
Der Typ der Eigenschaft icon wurde auf string | React.ComponentType erweitert.
Verwerfungen
Die Übergabe von string als Wert an die Eigenschaft icon wurde verworfen.
10.1.0
Verwerfungen
Die folgenden Eigenschaften wurden in Version 10.1.0 verworfen:
idmessage