Einfacher Fortschrittsbalken

Einfacher Fortschrittsbalken in Storybook

Beispiele

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

Einfaches Beispiel

Sie können einen Balken anzeigen, der anzeigt, wie weit ein Prozess fortgeschritten ist.

<SimpleProgressBar
    completed={25}
    total={100}
    />

Verwendung

Überblick

Der einfache Fortschrittsbalken zeigt den aktuellen Status eines Systemvorgangs an, z. B. Laden, Hochladen oder Übermitteln. Außerdem wird der Fortschritt einer bestimmten Aufgabe vor dem Abschluss angezeigt.

Zu verwenden

Verwenden Sie einen Fortschrittsbalken, um den aktuellen Status eines Systemvorgangs anzuzeigen, z. B. Laden, Hochladen oder Übermitteln, insbesondere in folgenden Fällen:

• Der Fortschritt der Aufgabe ist messbar (z. B. Abschluss in Prozent).
• Die Aufgabe ist komplex oder hat eine lange Wartezeit und Benutzer benötigen Feedback zum Status.
• Die Ungewissheit soll für Benutzer durch visuelles Feedback bei langwierigen Vorgängen verringert werden.

Nicht zu verwenden

Verwenden Sie in den folgenden Fällen keinen Fortschrittsbalken:

• Für sehr kurze Aufgaben, für die kein detailliertes Feedback erforderlich ist: Verwenden Sie stattdessen einfachere Indikatoren wie Lader.
• Zum Anzeigen des Fortschritts in einer Reihe von einzelnen Schritten (z. B. Ausfüllen eines Formulars in mehreren Schritten). Verwenden Sie stattdessen den Schrittfortschrittsbalken.
• Zum Anzeigen von Schritten und Unterschritten für eine bestimmte Aufgabe oder zum Verwenden von benutzerdefinierten Symbolen. Verwenden Sie stattdessen den Phasenfortschrittsbalken.

Formatierung

Aufbau

Der Fortschrittsbalken besteht aus den folgenden Elementen:

1. Beschriftung: Beschreibt die Aufgabe oder den Vorgang, die mit dem Fortschrittsbalken verfolgt werden.
2. Numerischer Wert: Stellt den Fortschritt eines Systemvorgangs oder einer Aufgabe innerhalb des Bereichs des Fortschrittsbalkens dar. Der numerische Wert wird als Anteil oder Prozentwert angezeigt.
3. Balken: Stellt den Fortschritt eines Systemvorgangs oder einer Aufgabe durch Anzeige einer gefüllten Linie dar.

Ausrichtung und Positionierung

Die Beschriftung kann über oder unter dem Fortschrittsbalken angezeigt werden.

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.

Beschriftung des Fortschrittsbalkens

• Fügen Sie eine Beschriftung für den Fortschrittsbalken hinzu, um Informationen zum Kontext des ausgeführten Vorgangs oder der ausgeführten Aufgabe anzuzeigen. In seltenen Fällen, in denen der Kontext ausreicht, kann die Beschriftung ausgeblendet werden. Diese Fortschrittsbalken müssen dennoch ein aria-label-Attribut enthalten, damit sie barrierefrei sind.
• Halten Sie die Beschriftung des Fortschrittsbalkens kurz und prägnant. Beschränken Sie die Beschriftung auf wenige Wörter oder eine einzige Textzeile.
• Verwenden Sie bei Beschriftungen die übliche Groß- und Kleinschreibung. Das erste Wort eines Satzes und Eigennamen werden groß geschrieben. For additional guidance on how to implement sentence case, see Capitalization.

Barrierefreiheit

Der einfache Fortschrittsbalken enthält die WAI-ARIA-Rolle 'progressbar'. Außerdem enthält er die WAI-ARIA-Attribute aria-valuetext, aria-valuenow, aria-valuemin und aria-valuemax, um zusätzliche Informationen für assistive Technologien bereitzustellen.

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 diese Komponente in Ihrer Anwendung verwenden, achten Sie darauf, dass die Beschriftung des Fortschrittsbalkens aussagekräftig und prägnant ist. Wenn Sie die Beschriftung ausblenden möchten, geben Sie eine label-Eigenschaft an und legen Sie hideLabel auf True fest. Damit wird das Attribut aria-label für die Beschriftung festgelegt.

Code

<SimpleProgressBar
    completed={25}
    total={100}
    />

Importanweisung

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

completederforderlich

Typ

number

Beschreibung

Number of steps that were completed.

totalerforderlich

Typ

number

Beschreibung

Total number of steps.

className

Typ

string

Beschreibung

CSS class name for this component.

hideLabel

Typ

boolean

Beschreibung

Hides the label. If you need to make the component be without a label and accessible, provide the label prop and set hideLabel to true -> aria-label attribute will be set to label.

label

Typ

IntlMessageShape

Beschreibung

Label of the progress bar.

labelPosition

Typ

'top' | 'bottom'

Beschreibung

Allows you to select the position of the progress bar label.

Standardwert

'bottom'

showPercentageProgress

Typ

boolean

Beschreibung

If set to true, shows percentage progress instead of fractions.

showProgressLabel

Typ

boolean

Beschreibung

Shows progress label.

Standardwert

true

idVerworfen

Typ

string

Beschreibung

Unique identifier for the component.

pathVerworfen

Typ

string

Beschreibung

Hint path to value.

progressBarClassNameVerworfen

Typ

string

Beschreibung

Class to override the progress bar styles.

stepClassNameVerworfen

Typ

string

Beschreibung

Class to override the progress bar step styles.

valueVerworfen

Typ

number

Beschreibung

Number of steps that were completed when used with path.

Hooks

Für SimpleProgressBar sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für SimpleProgressBar.

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

Verwerfungen

Die folgenden Eigenschaften wurden in Version 10.2.0 verworfen:

• id
• path
• value
• progressBarClassName
• stepClassName