Schrittfortschrittsbalken

Schrittfortschrittsbalken in Storybook

Verwendung

Überblick

Der Schrittfortschrittsbalken zeigt die Anzahl der Schritte an, die ein Benutzer zum Abschließen einer Aufgabe ausführen muss. Um ein Profil zu vervollständigen, muss ein Benutzer beispielsweise Angaben zu Qualifikationen und Wohnort machen. Diese können als obligatorische Schritte festgelegt werden, bevor die Aufgabe als abgeschlossen gilt.

Zu verwenden

Zum Anzeigen der Anzahl der Schritte, die zum Ausführen einer Aufgabe erforderlich sind.

Nicht zu verwenden

• Wenn Sie nicht wissen, wie viele Schritte zum Abschließen der Aufgabe erforderlich sind. Verwenden Sie stattdessen einen einfachen Fortschrittsbalken.
• Wenn der Prozess Unterschritte umfasst. Verwenden Sie stattdessen einen Phasenfortschrittsbalken.

Formatierung

Aufbau

Der Schrittfortschrittsbalken besteht aus den folgenden Elementen:

1. Schrittsymbol oder -nummer: Zeigt an, ob ein Schritt abgeschlossen, in Bearbeitung oder ausstehend ist.
2. Balken: Zeigt die Verbindung zwischen den Schritten an und stellt abgeschlossene Schritte sowie den aktuellen Schritt dar.
3. Schrittbeschriftung: Gibt den Kontext an und zeigt an, welche Aktion der Benutzer in jedem Schritt ausführt (z. B. „Zahlung übermitteln“).

Best Practices

• Stellen Sie sicher, dass die Schritte in einer logischen Reihenfolge angezeigt werden, von Anfang bis Ende (von links nach rechts).
• Benutzer müssen zu vorherigen Schritten zurückkehren können, um diese zu überprüfen und Details zu aktualisieren.
• Stellen Sie sicher, dass die Schritte logisch gruppiert, einfach und klar und somit verständlich sind.
• Stellen Sie sicher, dass alle Schritte sichtbar sind.
• Halten Sie die Anzahl der Schritte auf mindestens 3 und höchstens 7.

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 Schritte-Layouts

• Halten Sie die Beschriftungen kurz und kennzeichnen Sie den Schritt deutlich.
• Verwenden Sie bei Beschriftungen die übliche Groß- und Kleinschreibung. Das erste Wort eines Satzes und Eigennamen werden groß geschrieben. Weitere Informationen zur Groß- und Kleinschreibung finden Sie im entsprechenden Abschnitt.
• Bei Verwendung von QuickInfos in Verbindung mit einem Schritte-Layout darf der QuickInfo-Inhalt nur ein oder zwei Wörter umfassen.

Interaktionen

Tastatur

Jeder aktive Schritt kann über die Tastatur fokussiert werden.

Barrierefreiheit

Das Schritte-Layout umfasst eine Reihe von Schritten zur Kommunikation des Abschlussstatus. Es enthält das HTML5-Landmark-Tag <nav> und jedem Schritt im Prozess wird die WAI-ARIA-Rolle 'link' zugewiesen. Der visuelle Textwert ist auch in einem aria-label-Attribut enthalten.

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

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

Stellen Sie sicher, dass bei Verwendung von Links jeder Schritt den Benutzer zum richtigen Ziel führt.

Code

<StepProgressBar
    steps={[
        {
            title: 'This step has been visited',
            visited: true
        },
        {
            active: true,
            title: 'This step is active',
            visited: false
        },
        {
            title: 'This step will be visited in future',
            visited: false
        },
        {
            disabled: true,
            title: 'This step is disabled',
            visited: false
        }
    ]}
/>

Importanweisung

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

stepserforderlich

Typ

{ title: IntlMessageShape, visited: bool, active: bool, disabled: bool, onClick: () => void; }

disabled

Typ

boolean

Beschreibung

Indicates whether this step is disabled.

onClick

Typ

function (React.MouseEvent<HTMLElement>)

Beschreibung

On click event handler.

title

Typ

IntlMessageShape

Beschreibung

Title text for the component.

visited

Typ

boolean

Beschreibung

Indicates whether the step has already been visited by the user.

Beschreibung

Steps data.

className

Typ

string

Beschreibung

CSS class name for this component.

isVertical

Typ

boolean

Beschreibung

If set to true, the component is oriented vertically.

Hooks

Für StepProgressBar sind keine Hooks verfügbar.

Übersetzungsschlüssel

Mithilfe von ProgressIndicator-Meldungen können Details zum aktuellen Fortschritt des Benutzers angezeigt werden:

Schlüssel	Verwendet für
jutro-components.widgets.progressIndicator.status.completed	Schritt ist abgeschlossen
jutro-components.widgets.progressIndicator.status.inProgress	Schritt wird ausgeführt
jutro-components.widgets.progressIndicator.progressStep.status.visited	Schritt wurde besucht
jutro-components.widgets.progressIndicator.ariaLabel	aria-label gebildet aus der Kombination von progressTitle und progressLabel

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Beispiele

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

Beispiel für einen einfachen Schrittfortschrittsbalken

Zeigt den Fortschritt in Form von beschrifteten Schritten an.

<StepProgressBar
    steps={[
        {
            title: 'This step has been visited',
            visited: true
        },
        {
            active: true,
            title: 'This step is active',
            visited: false
        },
        {
            title: 'This step will be visited in future',
            visited: false
        },
        {
            disabled: true,
            title: 'This step is disabled',
            visited: false
        }
    ]}
/>

Vertikales Beispiel

Mit der Eigenschaft isVertical können Sie den Fortschritt als vertikale Liste von Schritten anzeigen.

<StepProgressBar
    isVertical
    steps={[
        {
            title: 'This step has been visited',
            visited: true
        },
        {
            active: true,
            title: 'This step is active',
            visited: false
        },
        {
            title: 'This step will be visited in future',
            visited: false
        },
        {
            disabled: true,
            title: 'This step is disabled',
            visited: false
        }
    ]}
/>

Änderungsprotokoll