Stepper

New version v0.0.1 🚀

Interactive stepper component for Phoenix LiveView, perfect for displaying multi-step workflows with customizable layouts and styles.

Installation:

mix mishka.ui.gen.component stepper

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless

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 white, primary, secondary, and dark 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, light, misc, and dawn, ensuring adaptability to various design needs.

<.stepper color="white"></.stepper>
<.stepper color="primary"></.stepper>
<.stepper color="secondary"></.stepper>
<.stepper color="dark"></.stepper>
<.stepper color="success"></.stepper>
<.stepper color="warning"></.stepper>
<.stepper color="danger"></.stepper>
<.stepper color="info"></.stepper>
<.stepper color="light"></.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>

Stepper Component Props

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction. Default is nil.
size	string	No	Determines the overall size of the elements, including padding and font size. Default is small.
margin	string	No	Determines the element margin. Default is medium.
color	string	No	Determines the color theme. Values: white, primary, secondary, dark, success, warning, danger, info, light, misc, dawn. Default is primary.
space	string	No	Space between items. Default is nil.
border	string	No	Determines border style. Default is extra_small.
font_weight	string	No	Determines custom class for the font weight. Default is font-normal.
max_width	string	No	Determines the style of element max width. Default is nil.
seperator_size	string	No	Determines the separator size. Default is extra_small.
vertical	boolean	No	Determines whether the element is vertical. Default is false.
class	string	No	Custom CSS class for additional styling. Default is nil.

Stepper Section Component Props

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction. Default is nil.
class	string	No	Custom CSS class for additional styling. Default is nil.
size	string	No	Determines the overall size of the elements, including padding and font size. Default is small.
step	string	No	Defines the state of the step. Values: none, current, loading, completed, canceled. Default is none.
icon	string	No	Icon displayed alongside the item. Default is nil.
color	string	No	Determines the color theme. Default is white.
title	string	No	Specifies the title of the element. Default is nil.
description	string	No	Determines a short description. Default is nil.
step_number	integer	No	Defines the step number. Default is 1.
vertical	boolean	No	Determines whether the element is vertical. Default is false.
clickable	boolean	No	Determines if the element can be activated on click. Default is true.
reverse	boolean	No	Switches the order of the element and label. Default is false.
border	string	No	Determines border style. Default is none.

Stepper CLI Arguments

Name	Type	Options	Recommended?
`--color`	string	white - primary - secondary - dark - success - warning - danger - info - light - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--space`	string	extra_small - small - medium - large - extra_large	Yes
`--type`	string	stepper - stepper_section	Yes
`--only`	string	stepper - stepper_section	Yes
`--module`	string	Something	NO