Wizard

Wizard in Storybook

Warning: Die Verwendung von Metadaten wurde abgekündigt. Sie können die assistentenbezogenen Komponenten zwar weiterhin mithilfe von Metadaten definieren, es wird jedoch empfohlen, stattdessen JSX zu verwenden.

Verwendung

Weitere Informationen finden Sie unter Spezifikationen zur Verwendung des Assistenten im Muster-Abschnitt.

Code

Importanweisung

import { * } from '@jutro/wizard-next';

Jutro stellt die mit dem Assistenten verbundenen Funktionen über das Paket @jutro/wizard-next bereit. Es enthält die folgenden Komponenten:

Wizard
WizardPage
WizardProgress
WizardActionBar
WizardPrompt

Der Wizard ist die Hauptkomponente, die alle Teile zusammenfügt – den Fortschrittsbalken, die Schaltflächen und die ihnen zugeordneten Aktionen sowie den Assistenteninhalt auf den Assistentenseiten. Bei Verwendung von WizardProgress und WizardActionBar können Sie ihr Erscheinungsbild anpassen, eigene Komponenten darin verwenden oder sie vollständig entfernen.

Funktionen des Assistenten

Die Hauptfunktionen des Assistenten sind:

Fortschrittsanzeige

Neben der bereitgestellten standardmäßigen Fortschrittsanzeige kann auch eine benutzerdefinierte Anzeige verwendet werden. Auf diese Weise können Sie Ihre eigene Fortschrittsanzeige erstellen, um Ihren Projektanforderungen gerecht zu werden, während Sie die anderen Funktionen des Jutro-Assistenten in vollem Umfang nutzen.

Aktionsleiste

Die Aktionsleiste steuert die Aktionen des Assistenten. Sie unterstützt die Ereignisse onCancel, onFinish, onNext und onPrevious, und die zugehörigen Callbacks können mit JSX angepasst werden. Zusätzlich können Sie für jede Aktion eine Knockout-Seite anpassen. Innerhalb jeder Aktion können Sie je nach Reaktion eine andere Knockout-Seite anpassen.

Seitenübergänge

Verwaltet die Seitenübergänge, die normalerweise vom Benutzer über die Interaktion mit den Aktionsleistenschaltflächen ausgelöst werden. Unterstützt next, previous und jump (z. B. wenn sich ein Benutzer in Schritt 5 befindet und durch die Sprungaktion zu Schritt 3 weitergeleitet wird).

Note: Die Assistenten-Engine erzwingt keine erneute Validierung, wenn der Benutzer die Daten ändert, nachdem er zu einem vorherigen Schritt gesprungen ist. Dies ist eine Frage der Implementierung/des Projekts.

Assistentenkomponente

Verwenden Sie diese Komponente, um einen Assistenten zu rendern. Diese Komponente ist der Hauptcontainer des Assistenten. Sie rendert Routen für die angegebenen Schritte. Jeder Schritt muss auf eine Komponente verweisen, die <WizardPage entweder umschließt oder erweitert. Jede Schrittkomponente empfängt Informationen vom Assistenten und von Navigationspfaden, die beim Rendern der Seite verwendet werden.

import { Wizard } from '@jutro/wizard-next';

const steps = [
  {
    key: 'one',
    route: 'step1',
    component: PageOne,
  },
  {
    key: 'two',
    route: 'step2',
    component: PageTwo,
  },
  {
    key: 'three',
    route: 'step3',
    component: PageThree,
  },
];

<Wizard
  baseRoute="/wizard/:zipCode"
  basePath="/wizard/90210"
  steps={steps}
  cancelPath="/home"
  finishPath="/home"
/>;

Assistenteneigenschaften

Dies ist die Liste der Eigenschaften der Wizard-Komponente. In den nächsten Unterabschnitten finden Sie zusätzliche Informationen zu den Eigenschaften layout und buttonProps und deren erwarteten Typen.

basePatherforderlich: Typ
string
Beschreibung
Base path for the wizard; used when building step links.
baseRouteerforderlich: Typ
string
Beschreibung
Base route for the wizard; used when building step routes.
locationerforderlich: Typ
{}
Beschreibung
Current path location, provided by react-router. See react-router props.
className: Typ
string
Beschreibung
CSS class name for this component.
actionBarLayout: Typ
'default' | 'spaceEvenly'
Beschreibung
The type of layout applied to action bar items: default - keeps items with visual separation, spaceEvenly - distributes items evenly in available grid space.
bodyClassName: Typ
string
Beschreibung
CSS class name for the body of this component.
buttonProps: Typ
{ cancel:{}, previous: {}, next: {}, finish: {} }
Beschreibung
Overrides for action buttons.
callbackMap: Typ
{onStartWizard: func, onFinishWizard: func, onCancelWizard: func,}
Beschreibung
Callback map for the resolver.
cancelPath: Typ
string
Beschreibung
Path to navigate on 'cancel'; if none provided, the 'cancel' button will not be displayed.
componentMap: Typ
{}
Beschreibung
Component map for page component resolver.
finishPath: Typ
string
Beschreibung
Path to navigate on 'finish'; if none provided, the 'finish' button will not be displayed.
history: Typ
{}
Beschreibung
React-Router history object. See react-router props.
initialStepPath: Typ
string
Beschreibung
Path to the initial step (will be appended to 'basePath'); if not provided, the first step will be displayed.
knockoutPath: Typ
string
Beschreibung
Path to navigate on fail of 'next'; if none provided, no default failTo will be added to the 'next' button.
layout: Typ
{desktop: layoutShape, tablet: layoutShape, phoneWide: layoutShape, phone: layoutShape}
Beschreibung
Object to override page layout.
match: Typ
{}
Beschreibung
React-Router match object. See react-router props.
onCancel: Typ
string | func
Beschreibung
Callback to invoke when the 'cancel' button is clicked; returns true, false or a promise.
onFinish: Typ
string | func
Beschreibung
Callback to invoke when the 'finish' button is clicked; returns true, false or a promise.
onStart: Typ
string | func
Beschreibung
Callback to trigger when the Wizard mounts.
onWizardEvent: Typ
func(info, eventName)
Beschreibung
The function(info, eventName) called when a page loads (invoked by WizardPage).
renderActionBar: Typ
func | boolean
Beschreibung
Callback to render the action bar, or hide/show it.
renderNotFound: Typ
func
Beschreibung
Callback to render 'not found' content; if not provided, nothing will be rendered if a path is not found.
renderProgressBar: Typ
func
Beschreibung
Callback to render a progress bar, or hide/show it.
staticContext: Typ
{}
Beschreibung
React-Router static context.
steps: Typ
{ id: string, route: string, title: string, , component: React.Node }[]
Beschreibung
Array of steps of the wizard.
subRoutes: Typ
{ id: string, route: string, title: string, , component: React.Node }[]
Beschreibung
Array of routes for subwizards. If a subroute matches the current location a subwizard is active otherwise the outer wizard is active.

Assistentenlayouts

Der Assistent verwendet eine von der Layout-Komponente abgeleitete Rasterstruktur. Sie können auch benutzerdefinierte Layoutobjekte für Desktops, Tablets und Smartphones übergeben, um das Layout des Assistenten anzupassen.

return (
        <WizardExampleContext.Provider value={exampleContext}>
            <Wizard
                baseRoute={route}
                layout={{
                    desktop: {
                        columns: ['1fr'],
                        repeat: '4',
                        gap: 'large',
                        colStart: '2',
                        colSpan: '1',
                    },
                    tablet: {
                        repeat: '4',
                        ...
                    },
                    phone: {
                        repeat: '4',
                        ...
                    },
                }}
                basePath={path}
                steps={steps}
               .......
            />
        </WizardExampleContext.Provider>
    );

Layouteigenschaft

className

Typ

string

Beschreibung

CSS class name for this component.

children

Typ

ReactNode (preferably `GridItem`)

Beschreibung

The content to be displayed in the page.

id

Typ

string

Beschreibung

Unique identifier for the component.

layout

Typ

{desktop?: LayoutShape, tablet?: LayoutShape, phoneWide?: LayoutShape, phone?: LayoutShape,}

colSpan: Typ
number | string
Beschreibung
Specifies how many columns an element will span across.
colStart: Typ
number | string
Beschreibung
Define column to start.
columns: Typ
any[]
Beschreibung
Define explicit columns.
gap: Typ
'auto-none' | 'small' | 'medium' | 'large'
Beschreibung
The gap size between rows and columns.
repeat: Typ
'auto-fit' | 'auto-fill' | number
Beschreibung
Amount of columns to repeat.

Beschreibung

Override the default device layout: desktop, tablet, phoneWide and phone, all of type LayoutShape.

`LayoutShape`-Eigenschaften

Das LayoutShape-Objekt wird in der layout-Eigenschaft verwendet, um das Layout des Assistenten für jeden der möglichen Breakpoints zu definieren.

colSpan: Typ
string | number
Beschreibung
specifies how many columns an element will span across.
colStart: Typ
string | number
Beschreibung
define column to start from.
columns: Typ
string[] | number[]
Beschreibung
define explicit columns.
gap: Typ
'none', 'small', 'medium', 'large'
Beschreibung
Gap between rows and columns.
repeat: Typ
'auto-fit' | 'auto-fill' | number | string
Beschreibung
Repeat columns patterns.

`buttonProps`-Eigenschaft

buttonProps werden an die Schaltflächen der Aktionsleiste übergeben. Dazu gehören cancel, previous, next und finish. Sie können verwendet werden, um das Erscheinungsbild oder das Verhalten der Standardschaltflächen Wizard (oder WizardPage) anzupassen.

Sie können Eigenschaften von Schaltflächen sowohl an den Wizard als auch an WizardPage übergeben.

Wenn Sie buttonProps in der Assistentenkomponente festlegen, überschreiben Sie die Standardwerte der Aktionsleistenschaltflächen für den gesamten Assistentenablauf.

Im Assistenten wird beispielsweise eine next-Schaltfläche mit fullWidth auf true gesetzt:

<Wizard
  buttonProps={{
    next: {
      fullWidth: true,
    },
  }}
/>

Wenn Sie buttonProps in einem Assistentenschritt festlegen, überschreiben Sie die Werte der Aktionsleistenschaltflächen für diesen Schritt.

Um das vorige Beispiel fortzuführen, würde dieser Schritt des Assistentenablaufs dann eine next-Schaltfläche mit fullWidth auf false festlegen und den Wert überschreiben, der auf Assistentenebene für diesen Schritt festgelegt wurde.

<WizardPage
  buttonProps={{
    // overrides of default button props, these props will have priority over the buttonProps override from the wizard.
    next: {
      fullWidth: false,
    },
  }}
/>

`buttonProps`-Eigenschaften

className

Typ

string

Beschreibung

CSS class name for this component.

children

Typ

React.Node | IntlMessageShape | { pathname?: IntlMessageShape; hash?: IntlMessageShape }

Beschreibung

The children elements to render inside of the Button.

disabled

Typ

boolean

Beschreibung

If true this button is disabled.

failToMessage

Typ

string

Beschreibung

The message shown when the promise is rejected; shown if 'failTo' is not provided.

fullWidth

Typ

boolean

Beschreibung

If true, the button expands to the available width.

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

iconClassName

Typ

string

Beschreibung

CSS class name for the icon.

iconPosition

Typ

left | right

Beschreibung

Where the icon is placed relative to the text.

id

Typ

string

Beschreibung

Unique identifier for the component.

message

Typ

IntlMessageShape

Beschreibung

The message shown when executing the trigger/promise.

size

Typ

small | medium

Beschreibung

Allows you to select the smaller or larger variant.

to

Typ

IntlMessageShape | IntlRouterLocation

Beschreibung

The destination path when the promise is resolved; can be an object like <Link to>.

toMessage

Typ

string

Beschreibung

The message shown when the promise is resolved; shown if 'to' is not provided.

Assistentenseitenkomponente

Die WizardPage-Komponente definiert den Inhalt und die Ereignisse für einen bestimmten Assistentenschritt.

import { WizardPage } from '@jutro/wizard-next';
import { useLocation } from 'react-router-dom';

const myWizardPage = () => {
  const location = useLocation();

  return (
    <WizardPage
      {
        cancelPath="/"
        finishPath="/offer"
        knockoutPath="/knockoutPage"
      } location={location}>
      <span>Account wizard page</span>
    </WizardPage>
  );
};

WizardPage-Eigenschaften

childrenerforderlich: Typ
node
Beschreibung
The content to be displayed in the page.
iderforderlich: Typ
string
Beschreibung
Unique identifier for the component.
locationerforderlich: Typ
object
Beschreibung
The location object with pathname of current URL. Usually provided from the location.pathname prop passed from the router.
className: Typ
string
Beschreibung
CSS class name for this component.
buttonProps: Typ
object
Beschreibung
Overrides for action buttons.
headerClass: Typ
string
Beschreibung
CSS class passed to wizard page header.
knockoutPath: Typ
string
Beschreibung
Path to navigate on fail of 'next'; if none is provided, no default failTo will be added to the 'next' button'.
onLoad: Typ
function
Beschreibung
The callback to invoke when page is loaded; returns true, false or a promise.
onNext: Typ
function
Beschreibung
The callback to invoke when the 'next' button is clicked; returns true, false or a promise.
onPageEventInfo: Typ
function
Beschreibung
The callback to get page event info to send with a wizard event.
onPrevious: Typ
function
Beschreibung
Callback to invoke when the 'back' button is clicked; returns true, false or a promise.
pageEventInfo: Typ
function | object
Beschreibung
Object or callback to get page event info to send with a wizard event.
panelClassName: Typ
string
Beschreibung
Additional class name for the panel.
renderHeader: Typ
function
Beschreibung
Function which renders a custom panel header element.
renderPanel: Typ
function
Beschreibung
The callback to the render panel method; if null then renders without a panel.
renderSubTitle: Typ
function
Beschreibung
Function to render a custom subTitle.
renderTitle: Typ
function
Beschreibung
Function to render a custom title.
resolveCallbackMap: Typ
object
Beschreibung
Callback map for the resolver.
subTitle: Typ
intlMessageShape | function
Beschreibung
Default panel subtitle expression.
title: Typ
intlMessageShape | function
Beschreibung
Default panel title expression.

Überlegungen und Referenzen zu WizardPage

Assistentenseiten-Callbacks: onNext, onLoad und onPrevious. Sie können auch Abfragen einblenden, wenn der Benutzer versucht, zu einer vorherigen Seite zurückzukehren oder den Assistenten abbrechen möchte.
Im Abschnitt Schaltflächeneigenschaften finden Sie Details zu den buttonProps-Platzierungsoptionen.
Weitere Informationen zu render-Eigenschaften finden Sie in den Abschnitten Anpassung der Aktionsleiste und Anpassung des Fortschrittsbalkens.

Komponente für Fortschrittsbalken des Assistenten

Es gibt eine Standardfortschrittsanzeige, die Sie anpassen können, oder Sie können eine benutzerdefinierte Komponente über die Eigenschaft der render-Funktion bereitstellen.

Die Standardfortschrittsanzeige wird über die WizardProgress-Komponente verwaltet. Sie basiert auf der SimpleProgressBar-Komponente.

Die gesamte Logik der WizardProgress-Komponente basiert auf den Informationen, die vom Wizard bereitgestellt werden, in den sie eingebettet ist. Die Liste der Schritte wird beispielsweise aus dem Assistentenkontext extrahiert.

Weitere Informationen finden Sie im Abschnitt Anpassen des Fortschrittsbalkens.

WizardProgress-Eigenschaften

basePath: Typ
string
Beschreibung
Path to be used when composing the steps URLs.
location: Typ
'none' | 'small' | 'medium' | 'large'
Beschreibung
To look for matching subroutes.
progressBarClassNameVerworfen: Typ
string
Beschreibung
Class to override progress bar step styles.

Aktionsleiste des Assistenten

Die WizardActionBar-Komponente bietet die Standardfunktionen zum Anzeigen und Verwalten der verschiedenen im Assistenten verfügbaren Optionen. Sie generiert und rendert den WizardButton aus mit Eigenschaften übergebenen Aktionen. Sie kombiniert die Aktion mit Standardeigenschaften für jede Schaltfläche. Die Standardeigenschaften werden überschrieben, wenn sie in Aktionen angegeben werden.

Im Folgenden finden Sie ein Beispiel zur Definition dessen, was passiert, wenn der Benutzer auf die Schaltfläche „Abbrechen“ oder „Weiter“ klickt:

import { WizardActionBar } from '@jutro/wizard-next';

  const actions = [
    {name: 'cancel', to: '/'},
    {name: 'next', to: '/wizard/test/step2'}
  ]

 <WizardActionBar actions={actions}/>

WizardActionBar-Eigenschaften

actionserforderlich: Typ
[]
Beschreibung
The list of actions to be rendered in the <WizardActionBar>.
className: Typ
string
Beschreibung
CSS class name for this component.
layout: Typ
'default' | 'spaceEvenly' | 'center'
Beschreibung
Type of layout applied to action bar items: default - keeps items with visual separation, spaceEvenly - distributes items evenly in available grid space, center - center button horizontally, will vertically stack multiple buttons.

Eingabeaufforderung des Assistenten

Bietet einen praktischen Mechanismus für Eingabeaufforderungen im Kontext eines Assistenten. Sie ermöglicht separate Bedingungen und Eingabeaufforderungen für die Fenster „Zurück“ und „Abbrechen“.

import { <WizardPrompt } from '@jutro/wizard-next';

<WizardPrompt
 cancelPrompt={{when: wizardChanged, message: 'Want to cancel?'}}
 previousPrompt={{when: dataChanged, message: 'Want to go back?'}}
/>

WizardPrompt-Eigenschaften

basePath: Typ
string
Beschreibung
Path to be used when composing the steps URLs.
previousPrompt: Typ
{when: boolean, title: string, message: string }
Beschreibung
Properties for the 'previous' prompt; contains 'when', 'title' and 'message'.
cancelPromptVerworfen: Typ
{when: boolean, title: string, message: string }
Beschreibung
Properties for the 'cancel' prompt; contains 'when', 'title' and 'message'.

Benutzerdefinierte Verhaltensweisen des Assistenten

Wenn die an die Eigenschaft onCancel, onNext oder onPrevious übergebene Funktion false zurückgibt, wird die Aktion gestoppt und der Benutzer wird nicht zum entsprechenden Pfad umgeleitet, sondern bleibt beim aktuellen Schritt.

Beispiele

Beispiel eines Assistenten

Dieses Beispiel zeigt eine einfache Assistentenkomponente mit den folgenden Funktionen:

Drei verschiedene Registerkarten
Navigation mit den Schaltflächen Weiter und Zurück
Validierung der Daten vor dem Verlassen der ersten Seite
Eine Abbruchoption, die den Benutzer zur zweiten Seite weiterleitet
Ein einfacher Fortschrittsbalken

In den folgenden Abschnitten werden die verschiedenen Schritte zum Definieren eines einfachen Assistenten mit den Komponenten aus dem Paket @jutro/wizard-next erläutert.

Für die Implementierung des Assistenten sind erforderlich:

Definition der verschiedenen Assistentenseiten, die angezeigt werden können
Definition des Assistentenlayouts: wie der Assistent angezeigt wird, einschließlich Breakpoint-Alternativen
Definition der benutzerdefinierten Elemente wie Aktionsleiste und Fortschrittsanzeige
Definition der Assistentenschritte: Routen und Alternativen, z. B. wohin der Benutzer nach Abschluss eines Schrittes geleitet wird
Die Zusammensetzung des Assistenten unter Verwendung aller zuvor definierten Elemente

1. Definieren der Assistentenseiten

Das Definieren einer Wrapper-Komponente ist der empfohlene Ansatz für die Definition der Assistentenseiten. Jeder Assistentenschritt muss auf eine Komponente verweisen, die WizardPage entweder umschließt oder erweitert.

Das folgende Beispiel zeigt, wie die Seitenkomponenten für den vorherigen Assistenten erstellt werden.

import { useState } from 'react';
import { WizardPage } from '@jutro/wizard-next';
import { Checkbox } from '@jutro/components';
import { useLocation } from 'react-router-dom';

const TheFirstPage = ({ id, wizardPageProps }) => {
  const location = useLocation();
  const [valid, setValid] = useState(false);
  const [stateMessages, setStateMessages] = useState(null);
  const firstStepCheckboxChanged = (e, value) => {
    setValid(value);
  };
  const wizardPageOnNext = () => {
    if (!valid) {
      setStateMessages({
        error: ['Select this checkbox to go to the next page'],
      });
    }
    // if false is returned, the default next event does not continue
    return valid;
  };

  return (
    <WizardPage
      id={id}
      {...wizardPageProps}
      onNext={wizardPageOnNext}
      location={location}
      title="First page">
      <span>Here you can add your content</span>
      <Checkbox
        label="This is mandatory to continue"
        required={true}
        stateMessages={stateMessages}
        onChange={firstStepCheckboxChanged}
      />
    </WizardPage>
  );
};

const AnotherWizardPage = ({ id, wizardPageProps }) => {
  const location = useLocation();
  return (
    <WizardPage
      id={id}
      {...wizardPageProps}
      location={location}
      title="Second page">
      <span>Another wizard page</span>
    </WizardPage>
  );
};

const LastWizardPage = ({ id, wizardPageProps }) => {
  const location = useLocation();
  return (
    <WizardPage
      id={id}
      {...wizardPageProps}
      location={location}
      title="The last page">
      <span>The last wizard page</span>
    </WizardPage>
  );
};

Neben der Seitendefinition enthält das Beispiel einen Validierungsmechanismus für die erste Seite, der im Falle ungültiger Daten die Weiterleitung zur nächsten Seite verhindert.

2. Definieren des Layouts

Definieren Sie die Seitenstruktur des Assistenten für die verschiedenen Breakpoints.

const layout = {
  desktop: { colStart: 1, colSpan: 12 },
  tablet: { colStart: 1, colSpan: 10 },
  phone: { colStart: 1, colSpan: 6 },
};

3. Definieren benutzerdefinierter Elemente

In diesem Beispiel werden Komponenten aus der Basiskonfiguration verwendet. Weitere Informationen zu benutzerdefinierten Implementierungsreferenzen finden Sie in den Abschnitten Anpassung des Fortschrittsbalkens und Anpassung der Aktionsleiste.

4. Definieren der Schritte des Assistenten

Sie müssen für jeden Schritt die entsprechende Route und die zugewiesene WizardPage-Komponente angeben.

const steps = [
  {
    id: 'wizard.firstpage',
    route: 'firstpage',
    title: 'First page',
    component: TheFirstPage,
  },
  {
    id: 'wizard.secondpage',
    route: 'secondpage',
    title: 'Second page',
    component: AnotherWizardPage,
  },
  {
    id: 'wizard.lastpage',
    route: 'lastpage',
    title: 'Last page',
    component: LastWizardPage,
  },
];

5. Erstellen des Assistenten

Führen Sie alle bisher definierten Elemente zusammen, um den Assistenten zu erstellen.

Die Option Abbrechen wird durch Definieren einer cancelPath-Eigenschaft hinzugefügt, während die Schaltflächen Weiter und Zurück standardmäßig die Definitionsreihenfolge der Schritte verwenden.

import { Wizard } from '@jutro/wizard-next';
import { useLocation } from 'react-router-dom';

<Wizard
  layout={layout}
  baseRoute={'/'}
  basePath={'/'}
  location={useLocation}
  cancelPath="secondpage"
  steps={steps}
/>;

Anpassung des Fortschrittsbalkens

Verwenden Sie renderProgressBar, um den Fortschrittsbalken zu deaktivieren oder einen eigenen Fortschrittsbalken zu erstellen.

Um den Fortschrittsbalken zu deaktivieren, setzen Sie renderProgressBar auf null oder false.
Um den Fortschrittsbalken anzupassen, setzen Sie renderProgressBar auf eine render-Eigenschaft.

Diese render-Eigenschaft erwartet eine Funktion, die einen Parameter, ein Objekt mit der basePath-Eigenschaft und ein Array der steps empfängt, die beide an den Assistenten übergeben werden.

Es folgt ein Beispiel für einen benutzerdefinierten Fortschrittsbalken, der mit dem Layout und den in den vorherigen Beispielen definierten Schritten erstellt wurde:

import { useLocation } from 'react-router-dom';
import { Wizard } from '@jutro/wizard-next';
import { StepProgressBar } from '@jutro/components';

const customProgressBar = ({ basePath, steps }) => {
  const { pathname } = useLocation(); // calc if the subroute a match
  const stepRoutes = steps.map((step) => step?.route);
  const currentStep = stepRoutes.indexOf(pathname.replace(`${basePath}/`, ''));

  const barSteps = steps.map((step) => {
    step.active = false;
    return step;
  });
  if (currentStep >= 0) barSteps[currentStep].active = true;
  return <StepProgressBar steps={barSteps} />;
};

<Wizard
  layout={layout}
  baseRoute={'/'}
  basePath={'/'}
  location={useLocation}
  cancelPath="firstpage"
  steps={steps}
  renderProgressBar={customProgressBar}
/>;

Weitere Informationen zu render-Eigenschaften finden Sie in der React-Dokumentation.

Anpassung der Aktionsleiste

Verwenden Sie renderActionBar, um die Aktionsleiste zu deaktivieren oder eine eigene Aktionsleiste zu erstellen.

Um die Aktionsleiste zu deaktivieren, setzen Sie renderActionBar auf null oder false.
Um die Aktionsleiste anzupassen, setzen Sie renderActionBar auf eine render-Eigenschaft.

Die render-Eigenschaft ist eine Funktion, die zwei Parameter empfängt:

resolvedPropsForButtons – Dazu gehören auch Routenpfade, die vom Assistenten auf der Grundlage des Ablaufs und des aktuellen Schritts berechnet werden.
actionBarLayout – Die gleiche Eigenschaft wurde an den Assistenten übergeben, um das Layout der Aktionsleiste festzulegen. Wenn Sie eine benutzerdefinierte Aktionsleiste verwenden, können Sie diese Eigenschaft auf beliebige Weise verwenden, da sie direkt über den Assistenten an die Funktion der render-Eigenschaft übergeben wird.

Ein Beispiel für eine benutzerdefinierte Aktionsleiste unter Verwendung der Schritte und des Layouts aus den vorherigen Beispielen wäre:

export const WizardWithCustomActionBar = () => {
  const location = useLocation();
  const history = useHistory();

  const customActionBar = (resolvedPropsForButtons, actionBarLayout) => {
    const selectedFlexDirection =
      actionBarLayout === 'column' ? 'column' : 'row';
    return (
      <div
        style={{
          border: 'solid 1px yellow',
          display: 'flex',
          flexDirection: selectedFlexDirection,
        }}>
        {resolvedPropsForButtons.map((propForButton) =>
          ('next' == propForButton.name || 'previous' == propForButton.name) &&
          propForButton.to != undefined ? (
            <Button
              label={propForButton.name}
              fullWidth={true}
              onClick={(e, to: propForButton.to) => handleNavigation(e, to)}
            />
          ) : (
            ''
          )
        )}
      </div>
    );
  };

  const handleNavigation = (event, to) => {
    history.replace(`//${to}`);
  };

  return (
    <Wizard
      layout={layout}
      baseRoute={'/'}
      basePath={'/'}
      location={location}
      steps={steps}
      renderActionBar={customActionBar}
    />
  );
};

Wir haben die Validierung aus diesem Beispiel entfernt, aber Sie können sie in der handleNavigation-Funktion hinzufügen.

Verwendung​

Code​

Importanweisung​

Funktionen des Assistenten​

Fortschrittsanzeige​

Aktionsleiste​

Seitenübergänge​

Assistentenkomponente​

Assistenteneigenschaften​

basePatherforderlich​

baseRouteerforderlich​

locationerforderlich​

className​

actionBarLayout​

bodyClassName​

buttonProps​

callbackMap​

cancelPath​

componentMap​

finishPath​

history​

initialStepPath​

knockoutPath​

layout​

match​

onCancel​

onFinish​

onStart​

onWizardEvent​

renderActionBar​

renderNotFound​

renderProgressBar​

staticContext​

steps​

subRoutes​

Assistentenlayouts​

Layouteigenschaft​

className​

children​

id​

layout​

LayoutShape-Eigenschaften​

colSpan​

colStart​

columns​

gap​

repeat​

buttonProps-Eigenschaft​

buttonProps-Eigenschaften​

className​

children​

disabled​

failToMessage​

fullWidth​

icon​

iconClassName​

iconPosition​

id​

message​

size​

to​

toMessage​

Assistentenseitenkomponente​

WizardPage-Eigenschaften​

childrenerforderlich​

iderforderlich​

locationerforderlich​

className​

buttonProps​

headerClass​

knockoutPath​

onLoad​

onNext​

onPageEventInfo​

onPrevious​

pageEventInfo​

panelClassName​

renderHeader​

renderPanel​

renderSubTitle​

Verwendung

Code

Importanweisung

Funktionen des Assistenten

Fortschrittsanzeige

Aktionsleiste

Seitenübergänge

Assistentenkomponente

Assistenteneigenschaften

`basePath`erforderlich

`baseRoute`erforderlich

`location`erforderlich

`className`

`actionBarLayout`

`bodyClassName`

`buttonProps`

`callbackMap`

`cancelPath`

`componentMap`

`finishPath`

`history`

`initialStepPath`

`knockoutPath`

`layout`

`match`

`onCancel`

`onFinish`

`onStart`

`onWizardEvent`

`renderActionBar`

`renderNotFound`

`renderProgressBar`

`staticContext`

`steps`

`subRoutes`

Assistentenlayouts

Layouteigenschaft

`className`

`children`

`id`

`layout`

`LayoutShape`-Eigenschaften

`colSpan`

`colStart`

`columns`

`gap`

`repeat`

`buttonProps`-Eigenschaft

`buttonProps`-Eigenschaften

`className`

`children`

`disabled`

`failToMessage`

`fullWidth`

`icon`

`iconClassName`

`iconPosition`

`id`

`message`

`size`

`to`

`toMessage`

Assistentenseitenkomponente

WizardPage-Eigenschaften

`children`erforderlich

`id`erforderlich

`location`erforderlich

`className`

`buttonProps`

`headerClass`

`knockoutPath`

`onLoad`

`onNext`

`onPageEventInfo`

`onPrevious`

`pageEventInfo`

`panelClassName`

`renderHeader`

`renderPanel`

`renderSubTitle`