Steps

Component

Interactive examples and API documentation

Basic
The most basic step bar. Use the size property to set different sizes.
Finished
This is a description.
2
In Progress Left 00:00:08
This is a description.
3
Waiting
This is a description.
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.
Code 
<%= render Hakumi::Space::Component.new(direction: :vertical, size: :large, block: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Steps::Component.new(current: 1) do |steps| %>
      <% steps.with_item(title: "Finished", description: "This is a description.") %>
      <% steps.with_item(title: "In Progress", subtitle: "Left 00:00:08", description: "This is a description.") %>
      <% steps.with_item(title: "Waiting", description: "This is a description.") %>
    <% end %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Steps::Component.new(current: 1, size: :small) do |steps| %>
      <% steps.with_item(title: "Finished", description: "This is a description.") %>
      <% steps.with_item(title: "In Progress", description: "This is a description.") %>
      <% steps.with_item(title: "Waiting", description: "This is a description.") %>
    <% end %>
  <% end %>
<% end %>
Error Status
By using status of Steps, you can specify the state for current step.
Finished
This is a description.
In Progress
This is a description.
3
Waiting
This is a description.
Code 
<%= render Hakumi::Steps::Component.new(current: 1, status: :error) do |steps| %>
  <% steps.with_item(title: "Finished", description: "This is a description.") %>
  <% steps.with_item(title: "In Progress", description: "This is a description.") %>
  <% steps.with_item(title: "Waiting", description: "This is a description.") %>
<% end %>
Vertical
A simple step bar in the vertical direction.
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.
Code 
<%= render Hakumi::Steps::Component.new(current: 1, direction: :vertical) do |steps| %>
  <% steps.with_item(title: "Finished", description: "This is a description.") %>
  <% steps.with_item(title: "In Progress", description: "This is a description.") %>
  <% steps.with_item(title: "Waiting", description: "This is a description.") %>
<% end %>
Clickable
Setting clickable makes Steps clickable. Click on a step to navigate.
Step 1
Click to go back
2
Step 2
Current step
3
Step 3
Click to proceed
Code 
<%= render Hakumi::Steps::Component.new(current: 1, clickable: true) do |steps| %>
  <% steps.with_item(title: "Step 1", description: "Click to go back") %>
  <% steps.with_item(title: "Step 2", description: "Current step") %>
  <% steps.with_item(title: "Step 3", description: "Click to proceed") %>
<% end %>
With Icon
You can use your own custom icons by setting the icon property for items.
Login
Verification
Pay
Done
Code 
<%= render Hakumi::Steps::Component.new(current: 1) do |steps| %>
  <% steps.with_item(title: "Login", icon: :user) %>
  <% steps.with_item(title: "Verification", icon: :solution) %>
  <% steps.with_item(title: "Pay", icon: :loading, icon_spin: true) %>
  <% steps.with_item(title: "Done", icon: :smile) %>
<% end %>
Title Placement and Progress
Use label_placement to set the label position and display the progress through percent.
Finished
This is a description.
2
In Progress Left 00:00:08
This is a description.
3
Waiting
This is a description.
Finished
This is a description.
2
In Progress Left 00:00:08
This is a description.
3
Waiting
This is a description.
Code 
<%= render Hakumi::Space::Component.new(direction: :vertical, size: :large, block: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Steps::Component.new(current: 1, percent: 60) do |steps| %>
      <% steps.with_item(title: "Finished", description: "This is a description.") %>
      <% steps.with_item(title: "In Progress", subtitle: "Left 00:00:08", description: "This is a description.") %>
      <% steps.with_item(title: "Waiting", description: "This is a description.") %>
    <% end %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Divider::Component.new %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Steps::Component.new(current: 1, percent: 60, label_placement: :vertical) do |steps| %>
      <% steps.with_item(title: "Finished", description: "This is a description.") %>
      <% steps.with_item(title: "In Progress", subtitle: "Left 00:00:08", description: "This is a description.") %>
      <% steps.with_item(title: "Waiting", description: "This is a description.") %>
    <% end %>
  <% end %>
<% end %>
Dot Style
Steps with progress dot style.
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
Waiting
This is a description.
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
Code 
<%= render Hakumi::Space::Component.new(direction: :vertical, size: :large, block: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Steps::Component.new(current: 1, progress_dot: true) do |steps| %>
      <% steps.with_item(title: "Finished", description: "This is a description.") %>
      <% steps.with_item(title: "In Progress", description: "This is a description.") %>
      <% steps.with_item(title: "Waiting", description: "This is a description.") %>
      <% steps.with_item(title: "Waiting", description: "This is a description.") %>
    <% end %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Steps::Component.new(current: 1, progress_dot: true, direction: :vertical) do |steps| %>
      <% steps.with_item(title: "Finished", description: "This is a description.") %>
      <% steps.with_item(title: "In Progress", description: "This is a description.") %>
      <% steps.with_item(title: "Waiting", description: "This is a description.") %>
    <% end %>
  <% end %>
<% end %>
Navigation Steps
Navigation steps.
Code 
<%= render Hakumi::Space::Component.new(direction: :vertical, size: :large, block: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Steps::Component.new(current: 0, type: :navigation, id: "nav-steps-1") do |steps| %>
      <% steps.with_item(title: "Step 1", subtitle: "00:00:05", description: "This is a description.") %>
      <% steps.with_item(title: "Step 2", subtitle: "00:01:02", description: "This is a description.") %>
      <% steps.with_item(title: "Step 3", subtitle: "waiting for longlong time", description: "This is a description.") %>
    <% end %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Divider::Component.new %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Steps::Component.new(current: 0, type: :navigation, id: "nav-steps-2") do |steps| %>
      <% steps.with_item(title: "Step 1") %>
      <% steps.with_item(title: "Step 2") %>
      <% steps.with_item(title: "Step 3") %>
      <% steps.with_item(title: "Step 4") %>
    <% end %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Divider::Component.new %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Steps::Component.new(current: 0, type: :navigation, size: :small, id: "nav-steps-3") do |steps| %>
      <% steps.with_item(title: "finish 1") %>
      <% steps.with_item(title: "finish 2") %>
      <% steps.with_item(title: "current process") %>
      <% steps.with_item(title: "wait") %>
    <% end %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Divider::Component.new %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Steps::Component.new(current: 0, type: :navigation, clickable: true, id: "nav-steps-clickable") do |steps| %>
      <% steps.with_item(title: "Step 1") %>
      <% steps.with_item(title: "Step 2") %>
      <% steps.with_item(title: "Step 3") %>
      <% steps.with_item(title: "Step 4") %>
    <% end %>
  <% end %>
<% end %>

<script>
  const clickableSteps = document.getElementById("nav-steps-clickable");

  if (clickableSteps) {
    clickableSteps.addEventListener("hakumi--steps:change", (event) => {
      const { current } = event.detail;

      ["nav-steps-1", "nav-steps-2", "nav-steps-3"].forEach((id) => {
        const el = document.getElementById(id);
        if (el?.hakumiComponent.api) {
          el.hakumiComponent.api.goTo(current);
        }
      });
    });
  }
</script>
Inline Steps
Inline type steps, suitable for displaying the process and current state of the object in the list content scene.
Step 1
Step 2
Step 3
Code 
<%= render Hakumi::Steps::Component.new(current: 1, type: :inline) do |steps| %>
  <% steps.with_item(title: "Step 1", tooltip: "This is step 1 details") %>
  <% steps.with_item(title: "Step 2", tooltip: "Processing your request") %>
  <% steps.with_item(title: "Step 3", tooltip: "Almost done!") %>
<% end %>

Steps API

Prop Type Default Description
current Integer 0 Index of current step, counting from 0.
direction Symbol :horizontal Direction of the step bar. Options: :horizontal, :vertical.
type Symbol :default Type of steps. Options: :default, :navigation, :inline.
size Symbol :default Size of the step bar. Options: :default, :small.
status Symbol :process Status of current step. Options: :wait, :process, :finish, :error.
label_placement Symbol nil Label placement. Options: :horizontal, :vertical. Auto-set to :vertical when progress_dot is true.
percent Integer nil Progress circle percentage of current step (0-100).
progress_dot Boolean false Steps with dot style.
responsive Boolean true Change to vertical direction when screen width smaller than 532px.
initial Integer 0 Starting step index.
clickable Boolean false Make steps clickable.
variant Symbol :filled Variant style. Options: :filled, :outlined.

Steps.Item API

Prop Type Default Description
title String nil Title of the step.
subtitle String nil Subtitle of the step.
description String nil Description of the step (not shown in inline type).
tooltip String nil Tooltip text shown on hover. Available for all step types.
icon Symbol nil Icon name for custom step icon.
status Symbol nil Override status of the step. Options: :wait, :process, :finish, :error.
disabled Boolean false Disable click on this step.

JavaScript API (element.hakumiSteps)

Prop Type Default Description
getCurrent() Function - Get current step index.
setCurrent(index) Function - Set current step index.
goTo(index) Function - Go to a specific step index.
next() Function - Go to next step.
prev() Function - Go to previous step.
isClickable() Function - Check if steps are clickable.

Events

Prop Type Default Description
hakumi--steps:change CustomEvent - Triggered when step changes. Detail: { current, previous }.