Doggo Storybook 0.10.4-34-g3a480e9

Steps

Renders a navigation for form steps.

Read more Read less

Usage

With patch navigation:

<.steps current_step={0}>
  <: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}>
  <: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 Value
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.
Required current_step * :integer

The current form step, zero-based index.

 Read more Read less
label :string "Form steps"
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>