Phasenfortschrittsbalken

Phasenfortschrittsbalken in Storybook

Verwendung

Überblick

Der Phasenfortschrittsbalken zeigt den Fortschritt des Benutzers bei der Erledigung einer Aufgabe an, die in verschiedene Phasen unterteilt ist.

Zu verwenden

• Zum Anzeigen von Schritten und Unterschritten für eine bestimmte Aufgabe.
• Wenn Sie benutzerdefinierte Symbole verwenden möchten.

Nicht zu verwenden

Wenn Sie sich nicht sicher sind, wie viele Schritte zum Abschließen der Aufgabe erforderlich sind. Verwenden Sie stattdessen einen einfachen Fortschrittsbalken.

Formatierung

Aufbau

Das Phasenlayout besteht aus den folgenden Elementen:

1. Phasensymbol: Zeigt an, ob eine Phase abgeschlossen, in Bearbeitung oder ausstehend ist. Sie können verschiedene Symbole mit dem Phasenfortschrittsbalken verwenden, um die Oberfläche anzupassen.
2. Balken: Verbindet die Phasen visuell.
3. Phasenbeschriftung: Liefert den Kontext zu jeder Phase (z. B. „Zahlung“).

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.

Phasen-Beschriftung

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

Screenreader

Der Phasenfortschrittsbalken stellt den gesamten Prozess dar. Er enthält eine Reihe kleinerer, unabhängiger Fortschrittsbalken, die Phasen in diesem Prozess darstellen. Die Komponente implementiert das HTML5-Landmark-Tag <nav>, und jede einzelne Phrase wird durch ihren Namen (über einen aria-label-Wert) und die WAI-ARIA-Rolle role=’link’ identifiziert.

Barrierefreiheit

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.

Code

<PhaseProgressBar
  phases={[
    {
      icon: BusinessCenterIcon,
      id: 'your-business',
      steps: [
        {
          title: 'Completed phase first step',
          visited: true,
        },
        {
          title: 'Completed phase second step',
          visited: true,
        },
      ],
      title: 'Completed Phase',
    },
    {
      icon: InsertDriveIcon,
      id: 'final-details',
      isError: false,
      steps: [
        {
          active: true,
          title: 'Active step',
          visited: true,
        },
        {
          title: 'Next step',
        },
      ],
      title: 'Current phase',
    },
    {
      icon: CreditCardIcon,
      id: 'payment',
      steps: [
        {
          title: 'Next phase step 1',
        },
        {
          title: 'Next phase step 2',
        },
        {
          title: 'Next phase step 3',
        },
      ],
      title: 'Next phase',
    },
  ]}
/>

Importanweisung

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

Eigenschaften des Phasenfortschrittsbalkens

phaseserforderlich

Typ

PhaseProps[]

Beschreibung

List of phase objects in the progress indicator. These are the same props listed in the Phase properties table.

className

Typ

string

Beschreibung

CSS class name for this component.

Phaseneigenschaften

stepserforderlich

Typ

{ title: intlMessageShape, visited?: bool, active?: bool, disabled?: bool, onClick?: () => void) }[]

titleerforderlich

Typ

intlMessageShape

Beschreibung

Title of the step represented by this array element.

active

Typ

string

Beschreibung

If set to true, this is the active step.

disabled

Typ

string

Beschreibung

If set to true, this step is disabled.

onClick

Typ

function (React.MouseEvent<HTMLElement>)

Beschreibung

On click event handler.

visited

Typ

boolean

Beschreibung

If set to true, the user has already visited this step.

Beschreibung

Steps data.

titleerforderlich

Typ

IntlMessageShape

Beschreibung

Text part for labeling the phase.

className

Typ

string

Beschreibung

CSS class name for this component.

icon

Typ

string | Icon

Beschreibung

An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.

id

Typ

string

Beschreibung

Unique identifier for the component.

isError

Typ

boolean

Beschreibung

Flag determining if phase will be shown as an error.

onClick

Typ

function (React.MouseEvent<HTMLElement>)

Beschreibung

On click event handler.

showLabel

Typ

boolean

Beschreibung

if set to true, the label will be displayed.

Hooks

ProgressLabelContext - Kontext zu den Beschriftungen des Phasenfortschritts.

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

Benutzerdefinierte Verhalten

Telefon-Breakpoint

Automatische Unterstützung von Breakpoints für Telefone. Rendert keine Phasenbeschriftungen, wenn ein Telefon-Breakpoint erkannt wird.

Beispiele

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

Beispiel für einen grundlegenden Phasenfortschrittsbalken

Zeigt den Fortschritt als eine Reihe von Phasen an, die wiederum eine Reihe von Teilschritten aufweisen.

<PhaseProgressBar
  phases={[
    {
      icon: BusinessCenterIcon,
      id: 'your-business',
      steps: [
        {
          title: 'Completed phase first step',
          visited: true,
        },
        {
          title: 'Completed phase second step',
          visited: true,
        },
      ],
      title: 'Completed Phase',
    },
    {
      icon: InsertDriveIcon,
      id: 'final-details',
      isError: false,
      steps: [
        {
          active: true,
          title: 'Active step',
          visited: true,
        },
        {
          title: 'Next step',
        },
      ],
      title: 'Current phase',
    },
    {
      icon: CreditCardIcon,
      id: 'payment',
      steps: [
        {
          title: 'Next phase step 1',
        },
        {
          title: 'Next phase step 2',
        },
        {
          title: 'Next phase step 3',
        },
      ],
      title: 'Next phase',
    },
  ]}
/>

Interaktives Beispiel

Dieses Beispiel zeigt, wie sich der Phasenfortschrittsbalken ändert, wenn ein Benutzer die Schritte der einzelnen Phasen durchläuft.

const [currentStage, setCurrentStage] = useState(0);
const [currentStep, setCurrentStep] = useState(0);
const initialPhases = [
  {
    title: 'First Phase',
    icon: BusinessCenterIcon,
    id: 'your-business',
    steps: [
      {
        title: 'First step',
        visited: true,
        active: true,
      },
      {
        title: 'Second step',
        visited: false,
      },
      {
        title: 'Third step',
        visited: false,
      },
    ],
  },
  {
    title: 'Second phase',
    icon: InsertDriveIcon,
    id: 'final-details',
    isError: false,
    steps: [
      {
        title: 'First step',
        visited: false,
      },
    ],
  },
];
const [phases, setPhases] = useState(initialPhases);
const [disableButton, setDisabledButton] = useState(false);
const [disableBackButton, setDisabledBackButton] = useState(true);
const [labelState, setLabelState] = useState('info');

const moveToNext = () => {
  let nextPhases = phases;
  let stage = currentStage;
  let step = currentStep;

  nextPhases[stage].steps[step].visited = true;
  nextPhases[stage].steps[step].active = false;

  if (stage == 0) {
    step < 2
      ? setCurrentStep(++step)
      : ((stage = 1), (step = 0), setCurrentStage(stage), setCurrentStep(step));
    nextPhases[stage].steps[step].active = true;
    setDisabledBackButton(false);
  } else {
    setDisabledButton(true);
    setLabelState('success');
  }

  setPhases(nextPhases);
};

const moveBack = () => {
  let nextPhases = phases;
  let stage = currentStage;
  let step = currentStep;

  nextPhases[stage].steps[step].visited = false;
  nextPhases[stage].steps[step].active = false;

  if (stage == 1) {
    stage = 0;
    step = 2;
    setCurrentStage(stage);
    setCurrentStep(step);
    nextPhases[stage].steps[step].active = true;
    nextPhases[stage].steps[step].visited = false;
    setLabelState('info');
    setDisabledButton(false);
  } else {
    step > 0
      ? setCurrentStep(--step)
      : ((stage = 1), (step = 0), setCurrentStage(stage), setCurrentStep(step));
    nextPhases[stage].steps[step].active = true;
    if (step == 0) {
      setDisabledBackButton(true);
    }
  }

  setPhases(nextPhases);
};

<JutroWrapper>
  <PhaseProgressBar phases={phases} />
  <br />
  <InfoLabel type={labelState}>Phase: {phases[currentStage].title}</InfoLabel>
  <InfoLabel type={labelState}>
    Step: {phases[currentStage].steps[currentStep].title}
  </InfoLabel>
  <br />
  <br />
  <Button
    label="previous"
    onClick={moveBack}
    disabled={disableBackButton}></Button>
  <Button
    label="next"
    onClick={moveToNext}
    disabled={disableButton}></Button>
</JutroWrapper>;

Beispiel für einen Fehler

Sie können hervorheben, wenn innerhalb einer Phase ein Fehler auftritt.

<PhaseProgressBar
  phases={[
    {
      icon: BusinessCenterIcon,
      id: 'your-business',
      steps: [
        {
          title: 'Completed phase first step',
          visited: true,
        },
        {
          title: 'Completed phase second step',
          visited: true,
        },
      ],
      title: 'Completed Phase',
    },
    {
      icon: InsertDriveIcon,
      id: 'final-details',
      isError: true,
      steps: [
        {
          active: true,
          title: 'Active step',
          visited: true,
        },
        {
          title: 'Next step',
        },
      ],
      title: 'Current phase',
    },
  ]}
/>

Beispiel für OnClick

Sie können eine Funktion hinzufügen, die ausgeführt wird, wenn auf den Phasentitel geklickt wird.

function MakeToast (text: string) {
        ToastProvider.toast({
            message: text,
            autoClose: 3000,
          })
    }

<ToastProvider />
<PhaseProgressBar
    phases={[
        {
        icon: BusinessCenterIcon,
        id: 'your-business',
        steps: [
            {
            title: 'Completed phase first step',
            visited: true
            },
            {
            title: 'Completed phase second step',
            visited: true
            }
        ],
        title: 'Completed Phase',
        onClick: () => {MakeToast("Completed clicked")}
        },
        {
        icon: InsertDriveIcon,
        id: 'final-details',
        steps: [
            {
            active: true,
            title: 'Active step',
            visited: true
            },
            {
            title: 'Next step'
            }
        ],
        title: 'Current phase',
        onClick: () => {MakeToast("Current clicked")}
        }
    ]}
    />

Änderungsprotokoll

10.9.0

icon-Eigenschaftstyp erweitert

Der Typ der Eigenschaft icon wurde auf string | React.ComponentType erweitert.

Abkündigungen

Die Übergabe von string als Wert an die Eigenschaft icon wurde abgekündigt.