Avo::PanelComponent

The panel component is one of the most used components in Avo.

<%= render Avo::PanelComponent.new(title: @product.name, description: @product.description) do |c| %>
  <% c.with_tools do %>
    <%= a_link(@product.link, icon: 'heroicons/solid/academic-cap', style: :primary, color: :primary) do %>
      View product
    <% end %>
  <% end %>

  <% c.with_body do %>
    <div class="flex flex-col p-4 min-h-24">
      <div class="space-y-4">
        <h3>Product information</h3>

        <p>Style: shiny</p>
      </div>
    </div>
  <% end %>
<% end %>

Options

All options are optional. You may render a panel without options.

<%= render Avo::PanelComponent.new do |c| %>
  <% c.with_body do %>
    Something here.
  <% end %>
<% end %>

-> name

The name of the panel. It's displayed on the top under the breadcrumbs.

Type

String

-> description

Small text under the name that speaks a bit about what the panel does.

Type

String

-> classes

A list of classes that should be applied to the panel container.

Type

String

-> body_classes

A list of classes that should be applied to the body of panel.

Type

String

-> data

A hash of data attributes to be forwarded to the panel container.

Type

Hash

-> display_breadcrumbs

Toggles the breadcrumbs visibility. You can't customize the breadcrumbs yet.

Type

Boolean

Slots

The component has a few slots where you customize the content in certain areas.

-> tools

We created this slot as a place to put resource controls like the back, edit, delete, and detach buttons. This slot will collapse under the title and description when the screen resolution falls under 1024px.

The section is automatically aligned to the right using justify-end class.

<%= render Avo::PanelComponent.new(name: "Dashboard") do |c| %>
  <% c.with_tools do %>
    <%= a_link('/admin', icon: 'heroicons/solid/academic-cap', style: :primary) do %>
      Admin
    <% end %>
  <% end %>
<% end %>

-> body

This is one of the main slots of the component where the bulk of the content is displayed.

<%= render Avo::PanelComponent.new do |c| %>
  <% c.with_body do %>
    Something here.
  <% end %>
<% end %>

-> bare_content

Used when displaying the Grid view, it displays the data flush in the container and with no background.

<%= render Avo::PanelComponent.new do |c| %>
  <% c.with_bare_content do %>
    Something here.
  <% end %>
<% end %>

-> footer_tools

This is pretty much the same slot as tools but rendered under the body or bare_content slots.

<%= render Avo::PanelComponent.new do |c| %>
  <% c.with_footer_controls do %>
    Something here.
  <% end %>
<% end %>

-> footer

The lowest available area at the end of the component.

<%= render Avo::PanelComponent.new do |c| %>
  <% c.with_footer do %>
    Something here.
  <% end %>
<% end %>

-> sidebar

The sidebar will conveniently show things in a smaller area on the right of the body.

<%= render Avo::PanelComponent.new do |c| %>
  <% c.with_sidebar do %>
    Something tiny here.
  <% end %>
<% end %>

-> bare_sidebar

Use this instead of sidebar to display content in a sidebar without the white background styling.

<%= render Avo::PanelComponent.new do |c| %>
  <% c.with_bare_sidebar do %>
    Something tiny here.
  <% end %>
<% end %>