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 %>