LoopOS UI v1.1.30.0-feat.indentifier.editor.869c1hwb7.rc3

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
<turbo-frame id="stepper_panel_preview">
  <div class="lui-stepper_panel">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      SLOT
    </div>
    <div class="w-full grow overflow-y-auto relative">
      <div class="lui-stepper" data-controller="stepper">
        <div class="lui-stepper__container">
          <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="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__content" data-lui--step-target="content">
                <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
                  Dummy Slot
                </div>
              </div>
    
              <div class="lui-stepper__step__buttons">
                <a class="lui-button lui-button--neutral--primary lui-button--size-tiny w-full w-full relative" data-controller="lui--button" data-action="lui--button#startLoading" href="/lookbook/inspect/stepper_panel/default?active_step=1">
                  <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>
                </a>
              </div>
            </div>
          </div>
          <div class="lui-stepper__step lui-stepper__step--next" 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">
                <a class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-full w-full relative" data-controller="lui--button" data-action="lui--button#startLoading" href="/lookbook/inspect/stepper_panel/default?active_step=0">
                  <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>
                </a>
                <a class="lui-button lui-button--neutral--primary lui-button--size-tiny w-full w-full relative" data-controller="lui--button" data-action="lui--button#startLoading" href="/lookbook/inspect/stepper_panel/default?active_step=2">
                  <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>
                </a>
              </div>
            </div>
          </div>
          <div class="lui-stepper__step lui-stepper__step--next" 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__buttons">
                <a class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-full w-full relative" data-controller="lui--button" data-action="lui--button#startLoading" href="/lookbook/inspect/stepper_panel/default?active_step=1">
                  <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>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-0 left-0 right-0 h-10" style="position: sticky; background: linear-gradient(180deg, rgba(252, 252, 252, 0.00) 0%, var(--surface-secondary-soft, #FCFCFC) 100%)"></div>
    </div>
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      SLOT
    </div>
  </div>
</turbo-frame>

StepperPanel

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
21
22
23
24
25
26
27
28
<%= tag.turbo_frame id: "stepper_panel_preview" do %>
  <%= render LooposUi::StepperPanel.new do |stepper_panel| %>
    <% stepper_panel.with_top do %>
      <%= render LooposUi::DummySlot.new(text: "SLOT") %>
    <% end %>
    <% stepper_panel.with_stepper(active_step: preview_params[:active_step]) do |stepper| %>
      <% stepper.with_step do |step|%>
        <% step.with_header(title: "Step 1", description: "Description 1", size: :small)  %>
        <%= render LooposUi::DummySlot.new(text: "Dummy Slot") %>
        <% step.with_next_action(href: preview_url(active_step: 1)) %>
      <% end %>
      <% stepper.with_step do |step|%>
        <% step.with_header(title: "Step 2", description: "Description 2", size: :small)  %>
        <%= render LooposUi::DummySlot.new(text: "Dummy Slot") %>
        <% step.with_previous_action(href: preview_url(active_step: 0)) %>
        <% step.with_next_action(href: preview_url(active_step: 2)) %>
      <% end %>
      <% stepper.with_step do |step|%>
        <% step.with_header(title: "Step 3", description: "Description 3", size: :small)  %>
        <%= render LooposUi::DummySlot.new(text: "Dummy Slot") %>
        <% step.with_previous_action(href: preview_url(active_step: 1)) %>
      <% end %>
    <% end %>
    <% stepper_panel.with_bottom do %>
      <%= render LooposUi::DummySlot.new(text: "SLOT") %>
    <% end %>
  <% end %>
<% end %>

No notes provided.

Param Description Input

Active step index

Description

The StepperPanel component is a layout wrapper that provides a structured container for stepper workflows. It combines a stepper component with additional layout elements like headers, footers, and action buttons to create a complete step-by-step process interface.

Arguments

The StepperPanel component doesn't accept any direct arguments. All configuration is done through the stepper slot and other slots.

Slots

stepper (Single)

The main stepper component that handles the step navigation and content display.

top (Single)

Optional content area above the stepper. Destined for the ProtocolExtra component

bottom (Single)

Optional content area below the stepper but above the actions. Destined for the ProtocolExtra component

actions (Single)

Action buttons area at the bottom of the panel. Automatically styled with secondary buttons and proper spacing.