Accordion Edit

<%= render_accordion title: "Did you know?",
  description: "You can wrap shadcn helpers in any component library you want!" %>

<%= render_accordion do %>
  <%= accordion_title do %>
    Use the generators
  <% end %>
  <%= accordion_description do %>
    Add components with <%= code("rails g shadcn_ui add accordion") %>
  <% end %>
<% end %>

Installation

rails generate shadcn-ui accordion

Usage

# Inline
<%= render_accordion(title:, description:) %>

# Description Block
<%= render_accordion(title:) do %>

<% end %>

# Title and Description Block
<%= render_accordion do %>
  <%= accordion_title do %>
  <% end %>

  <%= accordion_description do %>
  <% end %>
<% end %>

The Accordion component introduces:

• app/helpers/components/accordion_helper.rb
• app/views/components/ui/_accordion.html.erb
• app/javascript/controllers/ui/accordion_controller.js

The method render_accordion defined in app/helpers/components/accordion_helper.rb accepts a title: and description: keyword arguments in the inline usage.

When passed only a title argument, the helper will accept a block to be rendered as the content for the description.

When passed no arguments, the block passed to the accordion helper must call accordion_title and accordion_description both of which accept blocks for the content for those portals within the component.

<%= render_accordion title: "Embed components in the description of an accordion" do %>
  <%= accordion_description do %>
    <%= render_card title: "A Simple Card", class: "w-full" do %>
      <p class="p-6">But it could be anything really, give it a try.</p>
    <% end %>
  <% end %>
<% end %>

<%= render_accordion do %>
  <%= accordion_title do %>
    <em>If you need to customize the title</em>
  <% end %>
  <%= accordion_description do %>
    Use the full block format.
  <% end %>
<% end %>