Doggo Storybook 0.17.0

Steps

Renders a navigation for form steps.

Usage

Completed steps get accessibility text marked with the data-visually-hidden attribute, which needs a CSS rule. See Visually hidden text.

With patch navigation:

<.steps current_step={0} label="Order process">
  <:step on_click={JS.patch(to: ~p"/form/step/personal-information")}>
    Profile
  </:step>
  <:step on_click={JS.patch(to: ~p"/form/step/delivery")}>
    Delivery
  </:step>
  <:step on_click={JS.patch(to: ~p"/form/step/confirmation")}>
    Confirmation
  </:step>
</.steps>

With push events:

<.steps current_step={0} label="Order process">
  <:step on_click={JS.push("go-to-step", value: %{step: "profile"})}>
    Profile
  </:step>
  <:step on_click={JS.push("go-to-step", value: %{step: "delivery"})}>
    Delivery
  </:step>
  <:step on_click={JS.push("go-to-step", value: %{step: "confirmation"})}>
    Confirmation
  </:step>
</.steps>

Attribute	Type	Documentation	Default
class	:any	Any additional classes to be added. Read more Read less	[]
Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings.
completed_label	:string	Visually hidden text that is rendered for screen readers for completed Read more Read less	"Completed: "
steps. This value should be translated to the language in which the rest of the page is displayed.
Required current_step *	:integer	The current form step, zero-based index. Read more Read less

label	:string	Aria label for the navigation. This value should be translated to the Read more Read less
language in which the rest of the page is displayed. Do not repeat the word `navigation` in the label. Screen readers announce the role along with the name. Using the role in the label would make screen readers repeat it.
labelledby	:string	The DOM ID of an element that labels this navigation. Read more Read less
Set either this attribute or `label`.
linear	:boolean	If `true`, clickable links are only rendered for completed steps. Read more Read less	false
If `false`, also upcoming steps are clickable. If you don't want any clickable links to be rendered, omit the `on_click` attribute on the `:step` slots.
rest	:global	Any additional HTML attributes.
Required step *	:slot
Show slot attributes Hide slot attributes
on_click	:any	Event name or `Phoenix.LiveView.JS` command to execute when clicking on the step.
<:step on_click={Phoenix.LiveView.JS.push("go-to-step", value: %{step: "profile"})}> Profile </:step> <:step on_click={Phoenix.LiveView.JS.push("go-to-step", value: %{step: "delivery"})}> Delivery </:step> <:step on_click={Phoenix.LiveView.JS.push("go-to-step", value: %{step: "confirmation"})}> Confirmation </:step>