LoopOS UI v1.1.29.1

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
<div class="lui-accordion" data-controller="accordion" data-accordion-open-value="false">
  <div class="lui-accordion__header" >
    <button class="cursor-pointer flex justify-start gap-1 flex-1" type="button" data-action="click->accordion#toggle"
      data-accordion-target="trigger"
      aria-controls="accordion_5e6476896542">
      <div class="lui-accordion__icon mt-1">
        <div class="lui-icon h-[8px] w-[8px]">
          <i class="fa-regular fa-chevron-down lui-icon__icon" style="font-size: 8px; color: black;"></i>
        </div>
      </div>
      <span class="lui-accordion__title flex justify-start gap-1">
        <div class="lui-header lui-header--medium">
          <div class="lui-header__title_container">
            <span class="lui-header__title_container__title">
              Accordion
            </span>
          </div>
    <span class="lui-header__description">
          </span>
        </div>
      </span>
    </button>
    <div aria-controls="accordion_93949d81c3b3" class="lui-accordion__buttons">
      <div class="lui-action_buttons">
        <div class="lui-action_buttons__button-group">
          <button class="lui-button lui-button--neutral--secondary lui-button--size-default lui-button--disabled w-fit w-fit relative" data-controller="lui--button" disabled="disabled">
            <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
              Button
            </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>
      </div>
    </div>
  </div>
  <div 
    id="accordion_c21aebda5093"
    class="lui-accordion__content"
    data-accordion-target="content"
  >
    <div class="lui-accordion__content-inner">
      <div class="pb-4">
        <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
          Accordion content
        </div>
      </div>
      <div class="lui-accordion__accordion-content">
        <div class="lui-accordion" data-controller="accordion" data-accordion-open-value="false">
          <div class="lui-accordion__header" >
            <button class="cursor-pointer flex justify-start gap-1 flex-1" type="button" data-action="click->accordion#toggle"
              data-accordion-target="trigger"
              aria-controls="accordion_3b48dc572062">
              <div class="lui-accordion__icon mt-1">
                <div class="lui-icon h-[8px] w-[8px]">
                  <i class="fa-regular fa-chevron-down lui-icon__icon" style="font-size: 8px; color: black;"></i>
                </div>
              </div>
              <span class="lui-accordion__title flex justify-start gap-1">
                <div class="lui-header lui-header--medium">
                  <div class="lui-header__title_container">
                    <span class="lui-header__title_container__title">
                      Inner Accordion
                    </span>
                  </div>
    <span class="lui-header__description">
                    Inner Accordion Description
                  </span>
                </div>
              </span>
            </button>
            <div aria-controls="accordion_b08e9c5eb828" class="lui-accordion__buttons">
            </div>
          </div>
          <div 
    id="accordion_eab600aceb40"
    class="lui-accordion__content"
    data-accordion-target="content"
  >
            <div class="lui-accordion__content-inner">
              <div class="pb-4">    
                <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
                  Inner Accordion content
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="lui-accordion__accordion-content">
        <div class="lui-accordion lui-accordion--open" data-controller="accordion" data-accordion-open-value="true">
          <div class="lui-accordion__header" >
            <button class="cursor-pointer flex justify-start gap-1 flex-1" type="button" data-action="click->accordion#toggle"
              data-accordion-target="trigger"
              aria-controls="accordion_0fdf2b38da62">
              <div class="lui-accordion__icon mt-1">
                <div class="lui-icon h-[8px] w-[8px]">
                  <i class="fa-regular fa-chevron-down lui-icon__icon" style="font-size: 8px; color: black;"></i>
                </div>
              </div>
              <span class="lui-accordion__title flex justify-start gap-1">
                <div class="lui-header lui-header--medium">
                  <div class="lui-header__title_container">
                    <span class="lui-header__title_container__title">
                      Inner Accordion
                    </span>
                    <span class="flex w-fit">
                      <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
                        <div class="lui-tooltip__title">
                          I'm an accordion
                        </div>
                      </div>
                      <i class="lui-m_icon material-symbols-outlined" style="--lui-micon-size: 16px;">
                        info
                      </i>
                    </span>
                  </div>
    <span class="lui-header__description">
                  </span>
                </div>
              </span>
            </button>
            <div aria-controls="accordion_642299c62109" class="lui-accordion__buttons">
            </div>
          </div>
          <div 
    id="accordion_aecd44750902"
    class="lui-accordion__content"
    data-accordion-target="content"
  >
            <div class="lui-accordion__content-inner">
              <div class="pb-4">    
                <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
                  Inner Accordion 2 content
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Accordion

An accordion component that allows expanding and collapsing content interactively.

  • Header - The Accordion uses the Header component internally for rendering titles, descriptions, and tooltips

Usage rules

  • ✅ Do use the header slot when you need full control over the header content
  • ✅ Do use shorthand syntax (title, description, tooltip) for simple cases
  • ✅ Do use size: :small for compact accordions
  • ✅ Do use overflow_x_auto: true when accordion content may overflow horizontally
  • ❌ Don't use both shorthand options and the header slot (header slot takes precedence)
  • ❌ Don't use the deprecated body slot (use the default content slot instead)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%= render LooposUi::Accordion.new(title: "Accordion", size: preview_params[:size]) do |accordion| %>
  <%= render LooposUi::DummySlot.new(text: "Accordion content") %>
  <% accordion.with_accordion(title: "Inner Accordion", description: "Inner Accordion Description") do |inner_accordion| %>
    <%= render LooposUi::DummySlot.new(text: "Inner Accordion content") %>
  <% end %>
  <% accordion.with_accordion(title: "Inner Accordion", tooltip: "I'm an accordion", open: true) do |inner_accordion| %>
    <%= render LooposUi::DummySlot.new(text: "Inner Accordion 2 content") %>
  <% end %>
  <% accordion.with_action_buttons do |ab| %>
    <% ab.with_button_group do |g| %>
      <% g.with_button(text: 'Button', disabled: true, size: :default, type: :secondary, kind: :neutral) %>
    <% end %>
  <% end %>
<% end %>

No notes provided.

Param Description Input

—

Accordion

An accordion component that allows expanding and collapsing content interactively.

Arguments

Property Default Description
title nil Title to be displayed in the accordion header
description nil Description to be displayed in the accordion header
tooltip nil Tooltip to be displayed in the accordion header
size :normal Size variant for the header - :normal (maps to :medium in Header) or :small
open false Defines if the accordion is open by default
overflow_x_auto false Adds horizontal scroll when content overflows

Slots

Slot Description
body (Deprecated, use the content slot instead) Main content that will be expanded/collapsed
accordions Allows nesting multiple accordions within this accordion
action_buttons Allows the inclusion of an ActionButton component in the accordion header
header Renders a Header component. Takes precedence over title, description and tooltip parameters. Accepts all Header component options including size

Usage Example

Note that you can use this component with a "shorthand" syntax:

<%= render LooposUi::Accordion.new(title: "Accordion") do |accordion| %>
  <p>Content</p>
<% end %>

Or with the slot option:

<%= render LooposUi::Accordion.new do |accordion| %>
  <% accordion.with_header(title: "Accordion") %>
  <p>Content</p>
<% end %>

With custom header size

<%= render LooposUi::Accordion.new do |accordion| %>
  <% accordion.with_header(title: "Accordion", size: :small) %>
  <p>Content</p>
<% end %>

Usage Example with nested accordions

<%= render LooposUi::Accordion.new(title: "Accordion", description: "I'm about to accord") do |accordion| %>
  <p>Content</p>
  <% accordion.with_accordion(title: "Inner Accordion") do |inner_accordion| %>
    <p>Inner Content</p>
  <% end %>
<% end %>

Usage Example with button groups

<%= render LooposUi::Accordion.new(title: "Accordion", tooltip: "I'm an accordion", open: true) do |accordion| %>
  <p>Content</p>
  <% accordion.with_action_buttons do |ab| %>
    <% ab.with_button_group do |g| %>
      <% g.with_button(text: 'Button', disabled: true, size: :default, type: :secondary, kind: :neutral) %>
    <% end %>
  <% end %>
<% end %>