Step

Defines a step in the NioStepper component.

Selector

NioStep

Usage

The NioStepper component consists internally of one or more NioStep components to be defined in the default slot, each with named slots for the header and the content of the step.

Props

Prop name	Type	Required	Default value
stepName	String	Yes
valid	String	No	false
summary	Object	No

stepName

The name of the step. This string will be displayed in the step header, and must correspond to an existing entry of the orderedSteps prop on the parent NioStepper component.

valid

Whether the payload of the step is valid. The button to progress to the next step will only be enabled when true.

summary

The summary of the step payload. Will be displayed in the header if the stepName of this step is included in the completedSteps of the parent NioStepper component.

Events

This component does not emit any events directly. Instead, all events are emitted to the parent NioStepper component for the purpose of centralized control.

Slots

NioStep exposes two named slots, the contents of which define the template and behavior for each step.

content

The template defining the internal content of each step. Only visible when the component is the currentStep as defined on the parent NioStepper component.

header-complete

An optional slot for defining a custom template for the step header of a completed step. This slot is passed the summary prop object for use in this component. If this slot is not used, a default implementation of an NioSummarySlat component is included. For this case, ensure that the summary prop includes an object of the form:

{
	imageSrc: String,
	title: String,
	detailsLabel: String,
	detailsValue: String,
	detailsAnnotation: String
}	

See NioSummarySlat for details