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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<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_b5f9d8b692e9">
      <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-title_description lui-title_description--normal">
          <span class="lui-title_description__title">
            Accordion
          </span>
        </div>
      </span>
    </button>
    <div aria-controls="accordion_486edea6fd94" 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" data-controller="lui--button" disabled="disabled">
            <span class="lui-button__text" data-lui--button-target="text">
              Button
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div 
    id="accordion_f4a49a18773d"
    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_3274bba15646">
              <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-title_description lui-title_description--normal">
                  <span class="lui-title_description__title">
                    Inner Accordion
                  </span>
                  <span class="lui-title_description__description">
                    Inner Accordion Description
                  </span></div>
              </span>
            </button>
            <div aria-controls="accordion_71519151156a" class="lui-accordion__buttons">
            </div>
          </div>
          <div 
    id="accordion_f502a02b31d4"
    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_d53094d144de">
              <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-title_description lui-title_description--normal">
                  <span class="lui-title_description__title">
                    Inner Accordion
                    <span class="lui-icon_tooltip">
                      <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>
                      <div class="lui-icon h-[12px] w-[12px]">
                        <i class="fa-regular fa-circle-info lui-icon__icon" style="font-size: 12px; color: black;"></i>
                      </div>
                    </span>
                  </span>
                </div>
              </span>
            </button>
            <div aria-controls="accordion_7d8d9297e02a" class="lui-accordion__buttons">
            </div>
          </div>
          <div 
    id="accordion_1eb1bd6fbf70"
    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.

-

Usage rules

  • ✅ Do
  • ❌ Don't
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
open false Defines if the accordion is open by default

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 TitleDescription. Takes precedence over title, description and tooltip paramenters

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 %>

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 %>