Phlex Components
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
  <div data-controller="collapsible">
    <div class="flex items-center justify-between space-x-4 px-4 py-2">
      <h4 class="text-sm font-semibold"> @joeldrapper starred 3 repositories</h4>
      <div data-action="click->collapsible#toggle"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 w-9"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg><span class="sr-only">Toggle</span></button></div>
    </div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">phlex-ruby/phlex</div>
    <div data-collapsible-target="content" class="overflow-y-hidden">
      <div class="space-y-2 mt-2">
        <div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">phlex-ruby/phlex-rails</div>
        <div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">PhlexUI/phlex_ui</div>
      </div>
    </div>
  </div>
</div>
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
render(TestView.new) do
  Collapsible do
    div(class: "flex items-center justify-between space-x-4 px-4 py-2") do
      h4(class: "text-sm font-semibold") { " @joeldrapper starred 3 repositories" }
      CollapsibleTrigger do
        Button(variant: :ghost, icon: true) do
          plain(helpers.lucide_icon("chevrons-up-down", class: "w-4 h-4"))
          span(class: "sr-only") { "Toggle" }
        end
      end
    end
    div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
      "phlex-ruby/phlex"
    end
    CollapsibleContent do
      div(class: "space-y-2 mt-2") do
        div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
          "phlex-ruby/phlex-rails"
        end
        div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
          "PhlexUI/phlex_ui"
        end
      end
    end
  end
end

Default Collapsible

No params configured.