-
Introduction
Introduction
-
Button
Buttons Button
-
Button Link
Buttons Button Link
-
Disclosure Button
Buttons Disclosure Button
-
Switch
Buttons Switch
-
Toggle Button
Buttons Toggle Button
-
Accordion
Data Accordion
-
Card
Data Card
-
Date
Data Date
-
Datetime
Data Datetime
-
Fallback
Data Fallback
-
Property List
Data Property List
-
Table
Data Table
-
Tabs
Data Tabs
-
Tag
Data Tag
-
Time
Data Time
-
Tree
Data Tree
-
Alert
Feedback Alert
-
Alert Dialog
Feedback Alert Dialog
-
Badge
Feedback Badge
-
Skeleton
Feedback Skeleton
-
Field
Form Field
-
Field Group
Form Field Group
-
App Bar
Layout App Bar
-
Box
Layout Box
-
Cluster
Layout Cluster
-
Drawer
Layout Drawer
-
Page Header
Layout Page Header
-
Split Pane
Layout Split Pane
-
Stack
Layout Stack
-
Avatar
Media Avatar
-
Carousel
Media Carousel
-
Frame
Media Frame
-
Icon
Media Icon
-
Icon Sprite
Media Icon Sprite
-
Image
Media Image
-
Menu
Menu Menu
-
Menu Bar
Menu Menu Bar
-
Menu Button
Menu Menu Button
-
Menu Group
Menu Menu Group
-
Menu Item
Menu Menu Item
-
Menu Item Checkbox
Menu Menu Item Checkbox
-
Menu Item Radio Group
Menu Menu Item Radio Group
-
Action Bar
Miscellaneous Action Bar
-
Callout
Miscellaneous Callout
-
Combobox
Miscellaneous Combobox
-
Modal
Miscellaneous Modal
-
Radio Group
Miscellaneous Radio Group
-
Toolbar
Miscellaneous Toolbar
-
Tooltip
Miscellaneous Tooltip
-
Bottom Navigation
Navigation Bottom Navigation
-
Breadcrumb
Navigation Breadcrumb
-
Navbar
Navigation Navbar
-
Steps
Navigation Steps
-
Tab Navigation
Navigation Tab Navigation
-
Vertical Nav
Navigation Vertical Nav
-
Vertical Nav Section
Navigation Vertical Nav Section
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>
<.steps current_step={1}> <:step>Profile</:step> <:step>Delivery</:step> <:step>Confirmation</:step> </.steps>
<.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>
<.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>