Badge

Badge in Storybook

Beispiele

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design eines Badges und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel

Sie können für Benutzer einen Zahlenwert in einem roten Kreis anzeigen.

<Badge value={5} />

Badge-Typen

Bei den einzelnen Optionen der Eigenschaft Typ ändert sich das Aussehen des Badges.

<Badge
    type="neutral"
    value={5}
/>
<Badge
    type="notification"
    value={5}
/>
<Badge
    type="primary"
    value={5}
/>
<Badge
    type="inverse"
    value={5}
/>

Wert größer als Maximalwert

Wenn value größer als maxValue ist, wird er als {maxValue}+ angezeigt.

<JutroWrapper>
  <Badge
    value={15}
    maxValue={9}
  />
</JutroWrapper>

Verwendung

Überblick

Mit Badges können Informationen zu neuen oder aktualisierten Inhalten separat angegeben werden. Sie zeigen numerische Werte und Zähler an, z. B. die Anzahl der verfügbaren Aktualisierungen oder die Anzahl der ungelesenen Nachrichten. Der numerische Wert im Badge ändert sich dynamisch in Echtzeit, wenn weitere Benachrichtigungen erfolgen.

Zu verwenden

• Zum Anzeigen von Informationen zu neuen oder aktualisierten Inhalten als numerischer Wert.
• In Systemen mit komplexen Arbeitsabläufen, die Zusammenarbeit erfordern. Diese Vorgehensweise kann Benutzern helfen, mit wichtigen Aktivitäten Schritt zu halten.
• Zum Informieren von Benutzern über wichtige Softwareupdates, z. B. Fehlerkorrekturen oder neu hinzugefügte Funktionen.

Nicht zu verwenden

• Für nicht numerische Statusinformationen. Verwenden Sie stattdessen die Komponente Infobeschriftung.
• Zum Kategorisieren von Elementen und Filtern von Daten. Verwenden Sie stattdessen Tags.

Formatierung

Aufbau

Die Komponente Badge besteht aus den folgenden Elementen:

1. Container mit einer bestimmten, vom Anwendungsfall abhängigen Farbfüllung.
2. Beschriftung, die eine Zahl anzeigt. Informationen zum Umgang mit großen Zahlenwerten finden Sie unter Bewährte Verfahren.

Typen

Badges sind in verschiedenen Farben gehalten, die eine bestimmte Bedeutung haben:

1. Primär: Verwenden Sie das primäre Badge, wenn Sie Elemente verfolgen, die sich auf einen Workflow beziehen.
2. Benachrichtigung: Verwenden Sie das Benachrichtigungs-Badge, um Symbole einzublenden und neue und aktualisierte Inhalte zu kommunizieren, z. B. die Anzahl der ungelesenen Nachrichten.
3. Neutral: Verwenden Sie das neutrale Badge für nicht wesentliche Informationen.
4. Umgekehrt: Verwenden Sie das Badge „Umgekehrt“, um den Farbkontrast vor einem dunklen Hintergrund beizubehalten.

Best Practices

• Verwenden Sie eine einheitliche Position von Badge-Overlays innerhalb eines Produkts oder einer Benutzeroberfläche.
• Verwenden Sie Badges als eigenständige Komponente (links) oder als Überlagerung (rechts).
• Jutro verfügt über die Eigenschaft maxValue, mit der der Höchstwert für den Badge festgelegt werden kann. Wenn die Eigenschaft value größer als maxValue ist, wird im Badge „maxValue+“ angezeigt. Wenn es einen Anwendungsfall mit Tausenden von Threads, Instanzen oder Fehlern gibt, wird empfohlen, einen Wert für die Eigenschaft maxValue festzulegen.

Badge als eigenständige Komponente	Badge als Überlagerung

Interaktionen

Maus

• Durch Klicken auf einen Badge, der ein Symbol überlagert, wird eine Liste mit weiteren Informationen zu den jeweiligen Benachrichtigungen angezeigt.
• Ein Link kann in einer Liste erscheinen, die mit einem Badge verknüpft ist. Benutzer können Aktionen auslösen, indem sie auf diese Links klicken. Zum Beispiel: „Alle Benachrichtigungen anzeigen“ oder „Zu neuen Meldungen wechseln“.
• Badges werden ausgeblendet, nachdem Benutzer sie angeklickt haben.

Screenreader

Die Komponente „Badge“ umfasst die Attribute aria-live="polite" und aria-atomic="true". Benutzer von Screenreadern werden benachrichtigt, wenn Inhalte aktualisiert werden. Mit dem liveRegionContext-Drehregler in Storybook können Entwickler Kontext zur Bedeutung des Badges bereitstellen.

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 benutzerdefinierte Farbschemas auf den Badgehintergrund anwenden, achten Sie darauf, dass die Kontrastverhältnisse dem akzeptierten Schwellenwert von 4,5:1 entsprechen.

Code

<Badge value={5} />

Importanweisung

import { Badge } 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

className

Typ

string

Beschreibung

CSS class name for this component.

liveRegionContext

Typ

string

Beschreibung

Used to describe the live region for assistive technologies (e.g., Unread Emails).

maxValue

Typ

number

Beschreibung

The maximum value for the badge if value prop is greater than maxValue, then the Badge will display 'maxValue+'.

type

Typ

'neutral' | 'notification' | 'primary' | 'inverse'

Beschreibung

Phrase allowing to set custom style (success, general, neutral, etc.).

Standardwert

'notification'

value

Typ

number

Beschreibung

The value of the Badge.

idVerworfen

Typ

string

Beschreibung

Unique identifier for the component.

Hooks

Für Badge sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für Badge.

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.3.2

Die folgenden Probleme wurden in Patch 10.3.2 behoben:

ID	Beschreibung
JUT-19938	Die Eigenschaft type kennzeichnet die Option neutral als verworfen.

10.1.0

Verwerfungen

• id-Eigenschaft
• Die Eigenschaft type enthält verworfene Varianten:
  • success
  • error
  • warning
  • info

Bekannte Probleme

ID	Beschreibung
JUT-19938	Die Eigenschaft type kennzeichnet die Option neutral als verworfen.