Panels for UI in Rails

Panels

The Panels component (a.k.a. Accordion) is a great way to organize lots of information into a collapsible set of containers. Perfect for multi-part forms or settings panels.

They come packed with customization options.

Demos

Preview

Code

This is Panel A

This is the description for Panel A

This is the content for Panel A

This is Panel B

This is the description for Panel B

This is the content for Panel B

This is Panel C

This is the description for Panel C

This is the content for Panel C

Copy

<%= render "shared/components/panels/panels" do %>
  <%= render "shared/components/panels/panel",
              panel_id: "panel-a",
              title: "This is Panel A",
              description: "This is the description for Panel A",
              icon_name: "rocket" do %>
    This is the content for Panel A
  <% end %>
  <%= render "shared/components/panels/panel",
              panel_id: "panel-b",
              title: "This is Panel B",
              description: "This is the description for Panel B",
              icon_name: "rocket" do %>
    This is the content for Panel B
  <% end %>
  <%= render "shared/components/panels/panel",
               panel_id: "panel-c",
               title: "This is Panel C",
               description: "This is the description for Panel C",
               icon_name: "rocket" do %>
    This is the content for Panel C
  <% end %>
<% end %>

Panels with icons

Preview

Code

This is Panel A

This is the description for Panel A

This is the content for Panel A

This is Panel B

This is the description for Panel B

This is the content for Panel B

This is Panel C

This is the description for Panel C

This is the content for Panel C

Copy

<%= render "shared/components/panels/panels" do %>
  <%= render "shared/components/panels/panel",
              panel_id: "panel-a",
              title: "This is Panel A",
              description: "This is the description for Panel A" do %>
    This is the content for Panel A
  <% end %>
  <%= render "shared/components/panels/panel",
              panel_id: "panel-b",
              title: "This is Panel B",
              description: "This is the description for Panel B" do %>
    This is the content for Panel B
  <% end %>
  <%= render "shared/components/panels/panel",
               panel_id: "panel-c",
               title: "This is Panel C",
               description: "This is the description for Panel C" do %>
    This is the content for Panel C
  <% end %>
<% end %>

Panels without icons

Preview

Code

This is Panel A

This is the description for Panel A

This is the content for Panel A

This is Panel B

This is the description for Panel B

This is the content for Panel B

This is Panel C

This is the description for Panel C

This is the content for Panel C

Copy

<%= render "shared/components/panels/panels",
             one_open: false do %>
  <%= render "shared/components/panels/panel",
              panel_id: "panel-a",
              title: "This is Panel A",
              description: "This is the description for Panel A",
              icon_name: "rocket" do %>
    This is the content for Panel A
  <% end %>
  <%= render "shared/components/panels/panel",
              panel_id: "panel-b",
              title: "This is Panel B",
              description: "This is the description for Panel B",
              icon_name: "rocket" do %>
    This is the content for Panel B
  <% end %>
  <%= render "shared/components/panels/panel",
               panel_id: "panel-c",
               title: "This is Panel C",
               description: "This is the description for Panel C",
               icon_name: "rocket" do %>
    This is the content for Panel C
  <% end %>
<% end %>

Panels allowing multiple open

Preview

Code

This is Panel A

This is the description for Panel A

This is the content for Panel A

This is Panel B

This is the description for Panel B

This is the content for Panel B

This is Panel C

This is the description for Panel C

This is the content for Panel C

Copy

<%= render "shared/components/panels/panels",
             default_panel_id: "panel-a" do %>
  <%= render "shared/components/panels/panel",
              panel_id: "panel-a",
              title: "This is Panel A",
              description: "This is the description for Panel A",
              icon_name: "rocket" do %>
    This is the content for Panel A
  <% end %>
  <%= render "shared/components/panels/panel",
              panel_id: "panel-b",
              title: "This is Panel B",
              description: "This is the description for Panel B",
              icon_name: "rocket" do %>
    This is the content for Panel B
  <% end %>
  <%= render "shared/components/panels/panel",
               panel_id: "panel-c",
               title: "This is Panel C",
               description: "This is the description for Panel C",
               icon_name: "rocket" do %>
    This is the content for Panel C
  <% end %>
<% end %>

Panels with one open by default

Installation

Copy

rails g instrumental:panels

To insert a component into a view:

Copy

rails g instrumental:panels:insert

To insert a panel into a panels component in a view:

Copy

rails g instrumental:panels:insert

Customization

Find all of your customization options (via local variables) in these files:

app/views/shared/components/panels/_panels.html.erb
app/views/shared/components/panels/_panel.html.erb

I created Instrumental Components to make designing and building professional apps with Ruby on Rails easy, fast, and fun. I use it on all of my projects and I hope it helps you build something great.

Brian Casel

Creator of Instrumental Components

Learn more Send me a question or request