DevactionUI.Stepper (devaction_ui v0.1.0)

Copy Markdown View Source

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.

Summary

Types

state()

Functions

states(total, current, error \\ nil)

The state of each step of labels when the wizard is at current (counting from 1), with error the step that failed.

stepper(assigns)

Types

state()

@type state() :: :done | :current | :error | :todo

Functions

states(total, current, error \\ nil)

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

stepper(assigns)

Attributes

  • id (:string) (required)
  • orientation (:atom) - Defaults to :horizontal. Must be one of :horizontal, or :vertical.
  • class (:any) - Defaults to nil.
  • state_labels (:map) (required) - %{done: .., current: .., error: .., todo: ..}, read out.
  • Global attributes are accepted.

Slots

  • step (required) - Accepts attributes:
    • state (:atom) (required)
    • label (:string) (required)
    • help (:string)
  • done_icon - replaces the typographic ✓ of a finished step.