Appearance
Avo::PanelComponent
The panel component is one of the most used components in Avo.
erb
<%= render Avo::PanelComponent.new(title: @product.name, description: @product.description) do |c| %>
<% c.tools do %>
<%= a_link(@product.link, icon: 'heroicons/solid/academic-cap', style: :primary, color: :primary) do %>
View product
<% end %>
<% end %>
<% c.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.
erb
<%= render Avo::PanelComponent.new do |c| %>
<% c.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.
erb
<%= render Avo::PanelComponent.new(name: "Dashboard") do |c| %>
<% c.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.
erb
<%= render Avo::PanelComponent.new do |c| %>
<% c.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.
erb
<%= render Avo::PanelComponent.new do |c| %>
<% c.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.
erb
<%= render Avo::PanelComponent.new do |c| %>
<% c.footer_controls do %>
Something here.
<% end %>
<% end %>
footer
The lowest available area at the end of the component.
erb
<%= render Avo::PanelComponent.new do |c| %>
<% c.footer do %>
Something here.
<% end %>
<% end %>