Phlex Components
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
<div>
  <div class="w-full">
    <div data-controller="accordion" data-accordion-rotate-icon-value="180" class="border-b"><button data-action="click->accordion#toggle" class="w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline">
        <div class="flex items-center justify-between w-full">
          <p><span class="opacity-50" data-accordion-target="icon">Item 1</span></p>
          <span class="opacity-50" data-accordion-target="icon"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg></span></div>
      </button>
      <div data-accordion-target="content" class="overflow-y-hidden" style="height: 0px;">
        <div class="pb-4 pt-0 text-sm">Content 1</div>
      </div>
    </div>
    <div data-controller="accordion" data-accordion-rotate-icon-value="180" class="border-b"><button data-action="click->accordion#toggle" class="w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline">
        <div class="flex items-center justify-between w-full">
          <p><span class="opacity-50" data-accordion-target="icon">Item 2</span></p>
          <span class="opacity-50" data-accordion-target="icon"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg></span></div>
      </button>
      <div data-accordion-target="content" class="overflow-y-hidden" style="height: 0px;">
        <div class="pb-4 pt-0 text-sm">Content 2</div>
      </div>
    </div>
    <div data-controller="accordion" data-accordion-rotate-icon-value="180" class="border-b"><button data-action="click->accordion#toggle" class="w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline">
        <div class="flex items-center justify-between w-full">
          <p><span class="opacity-50" data-accordion-target="icon">Item 3</span></p>
          <span class="opacity-50" data-accordion-target="icon"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg></span></div>
      </button>
      <div data-accordion-target="content" class="overflow-y-hidden" style="height: 0px;">
        <div class="pb-4 pt-0 text-sm">Content 3</div>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
render(TestView.new) do
  Accordion do
    ITEMS.each do |it|
      AccordionItem do
        AccordionTrigger { AccordionDefaultTrigger { AccordionIcon { it[:title] } } }
        AccordionContent { AccordionDefaultContent { it[:content] } }
      end
    end
  end
end

Default Accordion

No params configured.