Collapsible Edit

<%= render_collapsible trigger: "@peduarte starred 3 repositories" do %>
  <% collapsible_preview do %>
    <div class="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
  <% end %>
  <% collapsible_body do %>
    <div class="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
    <div class="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
  <% end %>
<% end %>

Installation

  rails generate shadcn-ui collapsible

Usage

<%= render_collapsible trigger: do %>
  <% collapsible_preview do %>
  <% end %>

  <% collapsible_body do %>
  <% end %>
<% end %>

The Collapsible component introduces:

• app/helpers/components/collapsible_helper.rb
• app/views/components/ui/_collapsible.html.erb
• app/javascript/controllers/ui/collapsible_controller.js

Collapsible introduces the render_collapsible method that accepts an argument trigger: which is the text you want to show that will trigger the collapsible menu and a block. Within the block of collapsible, you can call collapsible_preview to define an element that is visible from the collapsible menu via a block. Similarly, you can call collapsible_body and pass it a block for the elements that are hidden that will be made visible when the trigger is pressed.