Overview of the Phoenix LiveView Stepper Component
The Mishka Chelekom Stepper component is a highly customizable Phoenix LiveView tool for creating intuitive, step-based workflows. Ideal for multi-step processes like forms or onboarding, it supports both horizontal and vertical layouts, with flexible customization options for colors, sizes, and border styles to match your app's design.
This Phoenix LiveView component also features different step states like current, completed, or canceled, making it easy for users to track their progress visually. The component's flexibility ensures a seamless user experience for any multi-step journey.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.
Colors
The Mishka Chelekom Stepper
component offers a range of color options to customize its appearance. Colors like
natural
,
primary
,
secondary
, and
provide foundational themes, while functional choices such as
success
,
warning
, and
danger
help convey progress or errors visually. Additionally, the component supports flexible options like
info
,
silver
,
misc
, and
dawn
, ensuring adaptability to various design needs.
<.stepper color="natural"></.stepper> <.stepper color="primary"></.stepper> <.stepper color="secondary"></.stepper> <.stepper color="success"></.stepper> <.stepper color="warning"></.stepper> <.stepper color="danger"></.stepper> <.stepper color="info"></.stepper> <.stepper color="silver"></.stepper> <.stepper color="misc"></.stepper> <.stepper color="dawn"></.stepper>
Size prop
The size attribute in the Mishka Chelekom Stepper component offers the following options:
extra_small
,
small
,
medium
,
large
, and
extra_large
. Each adjusts the font size, step size, and icon size accordingly.
<.stepper size="extra_small"></.stepper> <.stepper size="small"></.stepper> <.stepper size="medium"></.stepper> <.stepper size="large"></.stepper> <.stepper size="extra_large"></.stepper>
Border prop
The border attribute in the Mishka Chelekom Stepper component offers various size options, including
extra_small
,
small
,
medium
,
large
, and
extra_large
. Each option controls the thickness of the borders between each step in the stepper.
<.stepper border="extra_small"></.stepper> <.stepper border="small"></.stepper> <.stepper border="medium"></.stepper> <.stepper border="large"></.stepper> <.stepper border="extra_large"></.stepper>
Stepper vertical and horizontal
The vertical attribute is a boolean that controls the orientation of the stepper. By default, the stepper is displayed in a horizontal layout. If you want to switch to a vertical stepper, simply set the
vertical
prop to true. Additionally, when using the vertical orientation, ensure that you also apply the
vertical
prop to all the sections inside the stepper, so the entire component maintains a consistent layout and properly displays each step in the vertical format.
<.stepper vertical> <.stepper_section title="Step one" vertical /> <.stepper_section title="Step two" vertical /> <.stepper_section title="Step three" vertical /> </.stepper>
Horizontal stepper margin
The margin attribute controls the spacing between steps when the stepper is in horizontal mode. It can be customized with the following size options:
none
,
extra_small
,
small
,
medium
,
large
, and
extra_large
.
<.stepper margin="extra_small"></.stepper> <.stepper margin="small"></.stepper> <.stepper margin="medium"></.stepper> <.stepper margin="large"></.stepper> <.stepper margin="extra_large"></.stepper>
Vertical stepper space
The space attribute controls the spacing between steps when the stepper is in vertical mode. It can be customized with the following size options:
none
,
extra_small
,
small
,
medium
,
large
, and
extra_large
. By default it's nil so there is no space betweeen steps.
<.stepper space="extra_small" vertical> <.stepper_section title="Step one" vertical /> </.stepper> <.stepper spce="small" vertical> <.stepper_section title="Step one" vertical /> </.stepper> <.stepper spce="medium" vertical> <.stepper_section title="Step one" vertical /> </.stepper> <.stepper spce="large" vertical> <.stepper_section title="Step one" vertical /> </.stepper> <.stepper spce="extra_large" vertical> <.stepper_section title="Step one" vertical /> </.stepper>
Font weight
The
font_weight
allows you to control the font weight of the text within the stepper. You can use any Tailwind CSS font weight class, such as
font-normal
,
font-bold
, or
font-extrabold
, to customize the appearance of the text. This flexibility ensures that the stepper’s text aligns with the overall typography of your application.
<.stepper font_weight="font-light" > <.stepper_section title="Step one" description="This is description" /> </.stepper>
Stepper section component
The
stepper_section
component in the Mishka Chelekom Stepper is used to represent individual steps within the stepper. Each section can include details such as a title, description, and icon. If you're using the stepper in vertical mode, as mentioned earlier, you should add the
vertical
prop to each
stepper_section
to ensure the layout is properly aligned with the vertical orientation of the stepper.
<.stepper> <.stepper_section title="Section one" /> <.stepper_section title="Section two" /> <.stepper_section title="Section three" /> </.stepper> <.stepper vertical> <.stepper_section title="Section one" vertical /> <.stepper_section title="Section two" vertical /> <.stepper_section title="Section three" vertical /> </.stepper>
Stepper section icon prop
The icon prop in the stepper_section component allows you to display an icon alongside each step, providing visual cues to enhance the user experience. You can use any Heroicons by simply specifying the icon name in the
icon
prop, such as
hero-check-solid
or
hero-exclamation
. This flexibility helps to visually differentiate steps and make the process more intuitive for users.
<.stepper> <.stepper_section title="Section one" icon="hero-bell-alert" /> <.stepper_section title="Section two" icon="hero-home" /> <.stepper_section title="Section three" icon="hero-bell" /> </.stepper>
Stepper section title prop
The
title
prop in the
stepper_section
component allows you to set a title for each individual step, providing a clear and concise label that describes the step's purpose or action.
<.stepper> <.stepper_section title="Section one" /> <.stepper_section title="Section two" /> <.stepper_section title="Section three" /> </.stepper> <.stepper vertical> <.stepper_section title="Section one" vertical /> <.stepper_section title="Section two" vertical /> <.stepper_section title="Section three" vertical /> </.stepper>
Stepper section description prop
The
description
prop in the
stepper_section
component allows you to provide a brief description or additional information for each step. This helps to further clarify the purpose of the step or provide context for the user. The
description
is displayed below the title, offering a more detailed explanation.
<.stepper> <.stepper_section title="Section one" /> <.stepper_section title="Section two" /> <.stepper_section title="Section three" /> </.stepper> <.stepper vertical> <.stepper_section title="Section one" vertical /> <.stepper_section title="Section two" vertical /> <.stepper_section title="Section three" vertical /> </.stepper>
Stepper section step prop
The
step
attribute in the
stepper_section
component indicates the current state of each step. The available values include
none
,
current
,
completed
, and
canceled
, with the default set to
none
. Based on the selected state, different styles are applied to visually represent the step's progress or status, helping users easily identify where they are in the workflow.
<.stepper> <.stepper_section title="Section one" description="This is the first step of the process." /> <.stepper_section title="Section two" description="This is the second step of the process." /> <.stepper_section title="Section three" description="This is the third step of the process." /> </.stepper> <.stepper vertical> <.stepper_section title="Section one" description="This is the first step of the vertical process." vertical /> <.stepper_section title="Section two" description="This is the second step of the vertical process." vertical /> <.stepper_section title="Section three" description="This is the third step of the vertical process." vertical /> </.stepper>
Stepper section step number prop
The
step_number
attribute in the
stepper_section
component allows you to pass an integer that represents the number or position of the step in the sequence. By default, the
step_number
is set to
1
, but you can customize it by passing any integer to display the appropriate step number. This prop helps visually indicate the order of steps in workflows or processes, enhancing clarity for the user.
<.stepper size="extra_small" color="misc"> <.stepper_section title="one" step_number={1} /> <.stepper_section title="two" step_number={2} /> <.stepper_section title="three" step_number={3} /> <.stepper_section title="four" step_number={4} /> </.stepper>
Stepper section clickable prop
The
clickable
attribute in the
stepper_section
component determines whether the step can be interacted with by the user. By default, the
clickable
attribute is set to
true
, making all steps clickable, meaning the cursor will change and the user can interact with the step. However, when
clickable
is set to
false
, the step behaves like a normal item, and the cursor does not change, indicating it is not interactive. This is useful for steps that are informational rather than actionable.
<.stepper> <.stepper_section title="one" clickable={false} /> <.stepper_section title="two" clickable={false} /> <.stepper_section title="three" clickable={false} /> <.stepper_section title="four" /> </.stepper>
Stepper section reverse prop
The
reverse
attribute in the
stepper_section
component controls the order in which the icon and label are displayed. By default, the
reverse
attribute is set to
false
, meaning the icon appears before the label. When set to
true
, it switches the order, placing the label before the icon. This feature allows for greater layout flexibility, making it easy to adjust the visual flow based on design preferences.
<.stepper size="small"> <.stepper_section title="one" reverse /> <.stepper_section title="two" reverse /> <.stepper_section title="three" reverse /> <.stepper_section title="four" reverse /> </.stepper>