The steps of an onboarding or of a creation wizard, with the state of each: :done, :current, :error and
:todo. Horizontal, each step is a bar over a dot, a label and a line of help; vertical, it is a checklist with
a rail. The current step carries aria-current="step", and the state is also written (not only coloured) for
assistive technology.
A step that failed keeps its number in the dot (or the error_icon) and its label turns red; when the failed
step is also the one the wizard is at, states/3 gives :error, never :current. The vertical checklist
has no numbers: its dots hold the check of a finished step, the error_icon of a failed one, and are
otherwise empty rings (the state is still written out for assistive technology). state_labels must carry
the four keys, or the component raises.
Summary
Functions
The state of each step of labels when the wizard is at current (counting from 1), with error the step that failed. The error wins over the current step.
The steps of a wizard, horizontal or as a vertical checklist.
Types
Functions
@spec states(pos_integer(), pos_integer(), pos_integer() | nil) :: [state()]
The state of each step of labels when the wizard is at current (counting from 1), with error the step that failed. The error wins over the current step.
@spec stepper(map()) :: Phoenix.LiveView.Rendered.t()
The steps of a wizard, horizontal or as a vertical checklist.
Attributes
id(:string) (required)orientation(:atom) - Defaults to:horizontal. Must be one of:horizontal, or:vertical.class(:any) - Defaults tonil.state_labels(:map) (required) -%{done: .., current: .., error: .., todo: ..}, read out; all four keys are required.- Global attributes are accepted.
Slots
step(required) - Accepts attributes:state(:atom) (required) -:done,:current,:erroror:todo.label(:string) (required)help(:string) - a line of help under the label.
done_icon- replaces the typographic ✓ of a finished step.error_icon- replaces the number in the dot of a step that failed.