LoopOS UI v1.1.29.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<div class="lui-stepper" data-controller="stepper">
  <div class="lui-stepper__container">
    <div class="lui-stepper__step lui-stepper__step--previous" data-stepper-target="step" data-controller="lui--step">
      <div class="lui-stepper__step__indicator_wrapper">
        <div class="lui-stepper__step__indicator" data-stepper-index-value="0">
          <span class="lui-stepper__step__indicator_number">1</span>
          <i class="lui-m_icon lui-stepper__step__indicator_icon material-symbols-outlined" style="--lui-micon-size: 14px;">
            check
          </i>
        </div>
    
        <div class="lui-stepper__step__indicator_line"></div>
      </div>
  
      <div class="lui-stepper__step__body">
        <div class="lui-stepper__step__header">
          <div class="lui-header lui-header--small">
            <div class="lui-header__title_container">
              <span class="lui-header__title_container__title">
                Step 1
              </span>
            </div>
    <span class="lui-header__description">
              Description 1
            </span>
          </div>
        </div>
        
        <div class="lui-stepper__step__buttons">
          <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-full w-full relative" data-controller="lui--button">
            <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
              Back
            </span>          
            <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
              <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
                progress_activity
              </i>
            </div>
          </button>
          <button class="lui-button lui-button--neutral--primary lui-button--size-tiny w-full w-full relative" data-controller="lui--button">
            <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
              Next
            </span>          
            <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
              <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
                progress_activity
              </i>
            </div>
          </button>
        </div>
      </div>
    </div>
    <div class="lui-stepper__step lui-stepper__step--previous" data-stepper-target="step" data-controller="lui--step">
      <div class="lui-stepper__step__indicator_wrapper">
        <div class="lui-stepper__step__indicator" data-stepper-index-value="1">
          <span class="lui-stepper__step__indicator_number">2</span>
          <i class="lui-m_icon lui-stepper__step__indicator_icon material-symbols-outlined" style="--lui-micon-size: 14px;">
            check
          </i>
        </div>
    
        <div class="lui-stepper__step__indicator_line"></div>
      </div>
  
      <div class="lui-stepper__step__body">
        <div class="lui-stepper__step__header">
          <div class="lui-header lui-header--small">
            <div class="lui-header__title_container">
              <span class="lui-header__title_container__title">
                Step 2
              </span>
            </div>
    <span class="lui-header__description">
              Description 2
            </span>
          </div>
        </div>
        
        <div class="lui-stepper__step__buttons">
          <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-full w-full relative" data-controller="lui--button">
            <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
              Back
            </span>          
            <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
              <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
                progress_activity
              </i>
            </div>
          </button>
          <button class="lui-button lui-button--neutral--primary lui-button--size-tiny w-full w-full relative" data-controller="lui--button">
            <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
              Next
            </span>          
            <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
              <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
                progress_activity
              </i>
            </div>
          </button>
        </div>
      </div>
    </div>
    <div class="lui-stepper__step lui-stepper__step--open lui-stepper__step--current lui-stepper__step--active" data-stepper-target="step" data-controller="lui--step">
      <div class="lui-stepper__step__indicator_wrapper">
        <div class="lui-stepper__step__indicator" data-stepper-index-value="2">
          <span class="lui-stepper__step__indicator_number">3</span>
          <i class="lui-m_icon lui-stepper__step__indicator_icon material-symbols-outlined" style="--lui-micon-size: 14px;">
            check
          </i>
        </div>
    
        <div class="lui-stepper__step__indicator_line"></div>
      </div>
  
      <div class="lui-stepper__step__body">
        <div class="lui-stepper__step__header">
          <div class="lui-header lui-header--small">
            <div class="lui-header__title_container">
              <span class="lui-header__title_container__title">
                Step 3
              </span>
            </div>
    <span class="lui-header__description">
              Description 3
            </span>
          </div>
        </div>
    
        <div class="lui-stepper__step__content" data-lui--step-target="content">
          <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
            SLOT
          </div>
        </div>
    
        <div class="lui-stepper__step__buttons">
          <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-full w-full relative" data-controller="lui--button">
            <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
              Back
            </span>          
            <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
              <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
                progress_activity
              </i>
            </div>
          </button>
          <button class="lui-button lui-button--neutral--primary lui-button--size-tiny w-full w-full relative" data-controller="lui--button">
            <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
              Next
            </span>          
            <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
              <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
                progress_activity
              </i>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Stepper

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%= render LooposUi::Stepper.new(active_step: 2) do |stepper| %>
  <% stepper.with_step do |step| %>
    <% step.with_header(title: "Step 1", description: "Description 1") %>
    <%= render LooposUi::DummySlot.new(text: "SLOT") %>
    <% step.with_next_action %>
    <% step.with_previous_action %>
  <% end %>
  <% stepper.with_step do |step| %>
    <% step.with_header(title: "Step 2", description: "Description 2") %>
    <%= render LooposUi::DummySlot.new(text: "SLOT " * 100) %>
    <% step.with_next_action %>
    <% step.with_previous_action %>
  <% end %>
  <% stepper.with_step do |step| %>
    <% step.with_header(title: "Step 3", description: "Description 3") %>
    <%= render LooposUi::DummySlot.new(text: "SLOT") %>
    <% step.with_next_action %>
    <% step.with_previous_action %>
  <% end %>
<% end %>

No notes provided.

Param Description Input

—

Description

The Stepper component is used to display a sequence of steps in a process or workflow. It provides a visual representation of progress through multiple stages, allowing users to navigate between steps and see their current position.

Arguments

Property Default Required Description
data {} No Additional data attributes to be merged with the component's default data attributes. These will be applied to all the step number elements, for any extra actions to be done when the user clicks on a step.
active_step 1 No The currently active step (1-based indexing). This determines which step content is visible and which step indicator is marked as current.

Slots

steps (Multiple)

Step slots that render the content for each step in the stepper. Each step slot works as a container for all the elements that the programmer wants to put in the step.

header (Single)

Optional header slot for adding a title or description above the stepper.

JavaScript Events

The stepper uses Stimulus controllers to handle navigation. You can trigger these actions from other parts of your application:

Actions:

  • stepper#setStep - Selects a specific step when clicked (needs to be passed the desired step index)
  • stepper#previousStep - Navigates to the previous step (with bounds checking)
  • stepper#nextStep - Navigates to the next step (with bounds checking)

When adding navigation buttons to your steps, use the predefined button presets. They will already have the correct styles and handle navigation automatically.

for_next_step

Creates a button that navigates to the next step in the stepper.

<%= render LooposUi::Button.for_next_step(text: "Next") %>