Doggo Storybook 0.10.2

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>
Non linear Open in playground 
<.steps current_step={1}>
  <: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>
</.steps>
Linear Open in playground 
<.steps current_step={1} linear>
  <: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>
</.steps>