wizard-step

Props

Prop name	Description	Type	Values
lazy	Should this step be rendered only when It's active ? False means render all the time. <wizard-manager> can override this.	boolean	-
active	is this the current active step or not. when set, wizard manager will render this set. if there's multiple active steps, only the last one with active is rendered. disabled steps are ignored.	boolean	-
disabled	Should this step be skipped in counting and when the `Next` or `Prev` method is called ?	boolean	-
validate	A function which will be called with wizard data as argument whenever the `Next` button is called. This function must return a promise that resolves to a boolean. if resolved value is `true`, step data is valid and user can move to next step.	((wizardData: unknown) => boolean)	-
transition	Data object for passing to render function of 'transition' component. anything in this object will be passed to the render function directly.	TransitionProps \| ((backwarding: boolean, isActive: boolean) => TransitionProps)	-

Event name	Properties	Description
finished	object `object` - contains the wizard data	Emitted when the current step has finished (on calling next). Emits after activate-step if it was not cancelled. Eemits before the <wizard-manager> `finished` event on the last step (there's no `activate-step` when on last step, because there's no next step).
active	boolean `boolean` - undefined	Emitted when the step is activated or deactivated. active means it's the current step.

Name	Description	Bindings
default	The default slot of wizard-step. This slot provides scoped data and methods you can use in your steps.	active `boolean` - is `true` if this step component should be rendered currentStep `number` - Current step number. Starts from 1 and Excludes disabled steps count so you can use it as is in UI (numbers don't jump). currentStepIndex `number` - Current step index. starts from zero. stepsCount `number` - Total steps count. Excludes disabled steps count so you can use it as is in UI. realStepsCount `number` - Total steps count. Including disabled steps. next `(bypassValidation: boolean) => Promise<void>` - Proceed to next step prev `() => void` - Proceed to previous step setStep `(index: number) => void` - Directly go to a step by index. hasNext `boolean` - hasPrev `boolean` - validating `boolean` - if a validation check is in progress data `object` - the wizard data that you can use as your data. backwarding `boolean` - you can think of it as which direction the wizard is moving. If true, It's a previous step, If false, It's a next step. You have to note though that it can be neither forwarding or backwarding (at the time of accessing this), but for simplicity it's one boolean.