LoopOS UI v1.1.26.2

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
<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--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
          <i class="lui-button__icon lui-button__icon--default fa-regular fa-play-pause" data-lui--button-target="leadingIcon"></i>
        </button>
        <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
          <i class="lui-button__icon lui-button__icon--default fa-regular fa-heart" data-lui--button-target="leadingIcon"></i>
        </button>
        <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
          <i class="lui-button__icon lui-button__icon--default fa-regular fa-copy" data-lui--button-target="leadingIcon"></i>
        </button>
        <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
          <i class="lui-button__icon lui-button__icon--default fa-regular fa-gear" data-lui--button-target="leadingIcon"></i>
        </button>
        <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
          <i class="lui-button__icon lui-button__icon--default fa-regular fa-trash" data-lui--button-target="leadingIcon"></i>
        </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" data-controller="lui--button">
        <i class="lui-button__icon lui-button__icon--default fa-regular fa-plus" data-lui--button-target="leadingIcon"></i>
        <span class="lui-button__text" data-lui--button-target="text">
          This is an action
        </span>
      </button>
      <div data-controller="modal" class="inline-flex">
        <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" data-controller="lui--button">
            <i class="lui-button__icon lui-button__icon--default fa-regular fa-party" data-lui--button-target="leadingIcon"></i>
            <span class="lui-button__text" data-lui--button-target="text">
              With modals even!
            </span>
          </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-title_description lui-title_description--normal">
                <span class="lui-title_description__title">
                  Title
                </span>
                <span class="lui-title_description__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" data-controller="lui--button" data-action="click->modal#close">
                <span class="lui-button__text" data-lui--button-target="text">
                  Cancel
                </span>
              </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--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
          <i class="lui-button__icon lui-button__icon--default fa-regular fa-play-pause" data-lui--button-target="leadingIcon"></i>
        </button>
        <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
          <i class="lui-button__icon lui-button__icon--default fa-regular fa-heart" data-lui--button-target="leadingIcon"></i>
        </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.