Stepper

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.

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 variant="default" color="natural"></.stepper>
<.stepper variant="default" color="primary"></.stepper>
<.stepper variant="default" color="secondary"></.stepper>
<.stepper variant="default" color="success"></.stepper>
<.stepper variant="default" color="warning"></.stepper>
<.stepper variant="default" color="danger"></.stepper>
<.stepper variant="default" color="info"></.stepper>
<.stepper variant="default" color="silver"></.stepper>
<.stepper variant="default" color="misc"></.stepper>
<.stepper variant="default" color="dawn"></.stepper>

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 variant="gradient" color="natural"></.stepper>
<.stepper variant="gradient" color="primary"></.stepper>
<.stepper variant="gradient" color="secondary"></.stepper>
<.stepper variant="gradient" color="success"></.stepper>
<.stepper variant="gradient" color="warning"></.stepper>
<.stepper variant="gradient" color="danger"></.stepper>
<.stepper variant="gradient" color="info"></.stepper>
<.stepper variant="gradient" color="silver"></.stepper>
<.stepper variant="gradient" color="misc"></.stepper>
<.stepper variant="gradient" color="dawn"></.stepper>

The col_step and col_step_position attributes are used for changing the structure of the steps' shape. These attributes allow you to customize the layout and positioning of each step within the stepper component, providing greater flexibility in designing the stepper's appearance.

<.stepper col_step col_step_position="start"></.stepper>
<.stepper col_step col_step_position="end"></.stepper>
<.stepper col_step col_step_position="center"></.stepper>

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>

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>

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>

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>

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 between steps.

<.stepper space="extra_small" vertical>
  <.stepper_section title="Step one" vertical />
</.stepper>

<.stepper space="small" vertical>
  <.stepper_section title="Step one" vertical />
</.stepper>

<.stepper space="medium" vertical>
  <.stepper_section title="Step one" vertical />
</.stepper>

<.stepper space="large" vertical>
  <.stepper_section title="Step one" vertical />
</.stepper>

<.stepper space="extra_large" vertical>
  <.stepper_section title="Step one" vertical />
</.stepper>

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>

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>

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>

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>

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"
    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>

The step attribute in the stepper_section component indicates the current state of each step. The available values include none, current, loading, 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="one" step="completed" />
  <.stepper_section title="two" step="canceled" />
  <.stepper_section title="three" step="current" />
  <.stepper_section title="four" step="loading" />
  <.stepper_section title="five" step="none" />
</.stepper>

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>

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>

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>