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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<div class="lui-tabs_section">
  <div class="lui-tabs_section__header ">
    <div class="lui-title_description lui-title_description--normal">
      <span class="lui-title_description__title">
        This is a title
      </span>
    </div>
    <div class="lui-tabs_section__buttons">
      <div class="lui-action_buttons__button-group">
        <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-play-pause" data-lui--button-target="leadingIcon"></i></div>
          </div>
            
          <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: 16px;">
              progress_activity
            </i>
          </div>
        </button>
        <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-heart" data-lui--button-target="leadingIcon"></i></div>
          </div>
            
          <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: 16px;">
              progress_activity
            </i>
          </div>
        </button>
        <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-copy" data-lui--button-target="leadingIcon"></i></div>
          </div>
            
          <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: 16px;">
              progress_activity
            </i>
          </div>
        </button>
        <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-gear" data-lui--button-target="leadingIcon"></i></div>
          </div>
            
          <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: 16px;">
              progress_activity
            </i>
          </div>
        </button>
        <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-trash" data-lui--button-target="leadingIcon"></i></div>
          </div>
            
          <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: 16px;">
              progress_activity
            </i>
          </div>
        </button>
      </div>
    </div>
  </div>
  <div class="lui-tabs_section__content">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      Content Slot
    </div>
  </div>
</div>
<p class="mt-6 text-general-danger-800">only slot</p>
<div class="lui-tabs_section">
  <div class="lui-tabs_section__content">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      Content Slot
    </div>
  </div>
</div>
<p class="mt-6">With corner actions</p>
<div class="lui-tabs_section">
  <div class="lui-tabs_section__header ">
    <div class="lui-title_description lui-title_description--normal">
      <span class="lui-title_description__title">
      </span>
    </div>
    <div class="lui-tabs_section__buttons">
      <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
        <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
          <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-plus" data-lui--button-target="leadingIcon"></i></div>
        </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
          This is an action
        </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: 16px;">
            progress_activity
          </i>
        </div>
      </button>
      <div class="inline-flex lui-modal-wrapper" data-controller="modal" data-modal-open-value="false" data-modal-single-use-value="false">
        <div class="lui-modal__trigger" data-action="click->modal#open">
          <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
            <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
              <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-party" data-lui--button-target="leadingIcon"></i></div>
            </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
              With modals even!
            </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: 16px;">
                progress_activity
              </i>
            </div>
          </button>
        </div>
        <dialog id="" data-modal-target="modal" style="max-width:480px;" class="lui-modal rounded-md p-0 ">
          <div class="lui-modal__wrapper">
            <div class="lui-modal__header">
              <div class="lui-header lui-header--page">
                <div class="lui-header__title_container">
                  <span class="lui-header__title_container__title">
                    Title
                  </span>
                </div>
    <span class="lui-header__description">
                  Description
                </span>
              </div>
              <div class="-mt-1" >
                <button data-action="click->modal#close" class="cursor-pointer -mr-1 p-1">
                  <div class="lui-icon h-[10px] w-[10px]">
                    <i class="fa-regular fa-xmark lui-icon__icon" style="font-size: 10px; color: black;"></i>
                  </div>
                </button>
              </div>
            </div>
            <div class="lui-modal__content">
              <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
                Content Slot
              </div>
            </div>
            <div class="lui-modal__footer">
              <button class="lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit relative" data-controller="lui--button" data-action="click->modal#close">
                <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
                  Cancel
                </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: 14px;">
                    progress_activity
                  </i>
                </div>
              </button>
            </div>
          </div>
        </dialog>
      </div>
      <div class="lui-icon h-[16px] w-[16px]">
        <i class="fa-regular fa-horse lui-icon__icon" style="font-size: 16px; color: black;"></i>
      </div>
      <div class="lui-action_buttons__button-group">
        <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-play-pause" data-lui--button-target="leadingIcon"></i></div>
          </div>
            
          <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: 16px;">
              progress_activity
            </i>
          </div>
        </button>
        <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-heart" data-lui--button-target="leadingIcon"></i></div>
          </div>
            
          <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: 16px;">
              progress_activity
            </i>
          </div>
        </button>
      </div>
    </div>
  </div>
  <div class="lui-tabs_section__content">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      Content Slot
    </div>
  </div>
</div>

TabsSection

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
29
30
31
32
33
34
35
<% attrs = {size: :default, type: :secondary, kind: :neutral } %>
<%= render LooposUi::TabsSection.new(icon: params[:icon] , title: params[:title] ||  "This is a title", description:  params[:description], size: params[:size] || "normal", tooltip: params[:tooltip], underline: params[:underline] ) do |c| %>
  <% c.with_button_group do |g| %>
    <% g.with_button(leading_icon: "fa-regular fa-play-pause", **attrs) %>
    <% g.with_button(leading_icon: "fa-regular fa-heart", **attrs) %>
    <% g.with_button(leading_icon: "fa-regular fa-copy", **attrs) %>
    <% g.with_button(leading_icon: "fa-regular fa-gear", **attrs) %>
    <% g.with_button(leading_icon: "fa-regular fa-trash", **attrs) %>
  <% end %>
  <%= render LooposUi::Dummy.new(text: "Content Slot") %>
<% end %>
<p class="mt-6 text-general-danger-800">only slot</p>
<%= render LooposUi::TabsSection.new do %>
  <%= render LooposUi::Dummy.new(text: "Content Slot") %>
<% end %>
<p class="mt-6">With corner actions</p>
<%= render LooposUi::TabsSection.new do |ts| %>
  <% ts.with_button_group do |g| %>
    <% g.with_button(leading_icon: "fa-regular fa-play-pause", **attrs) %>
    <% g.with_button(leading_icon: "fa-regular fa-heart", **attrs) %>
  <% end %>
  <% ts.with_corner_action do %>
    <%= render LooposUi::Button.new(text: "This is an action", icon: :plus, **attrs) %>
  <% end %>
  <% ts.with_corner_action do %>
    <%= render LooposUi::Modal.new(title: "Title", description: "Description") do |m| %>
      <% m.with_trigger_button(text: "With modals even!", icon: :party, **attrs) %>
      <%= render LooposUi::Dummy.new(text: "Content Slot") %>
    <% end %>
  <% end %>
  <% ts.with_corner_action do %>
    <%= render LooposUi::Icon.new(icon: :horse) %>
  <% end %>
  <%= render LooposUi::Dummy.new(text: "Content Slot") %>
<% end %>

No notes provided.

Param Description Input

—

—

—

—

—

—

Description

Documentation for TabsSection, a component that organizes content within sections using a header and optional buttons, descriptions, and tooltips. This component is useful for structuring tabbed layouts with a flexible, customizable header.

Arguments

Property Default Description
icon nil Optional icon displayed alongside the section's title.
title nil The title displayed in the section's header.
description nil Optional description text for additional context, displayed below the title.
size "normal" Specifies the size of the section header. Can be used to adjust the appearance of the title and description (e.g., normal, small).
tooltip nil Optional tooltip providing additional information about the section.
underline false If set to true, the section's header will display with an underline styling.

Slots

  • corner_actions - Open slot to render compents at the right corner
  • button_groups - Defines a collection of button groups to be rendered in the header's action area. Each button_group can contain multiple buttons.
  • buttons - Adds individual buttons to a button_group. Supports button presets defined in LooposUi::Button.