Zum Hauptinhalt springen

Schrittfortschrittsbalken

Schrittfortschrittsbalken in Storybook

Beispiele​

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

Einfaches Beispiel​

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
        }
    ]}
/>