1. SmartAdmin
  2. UI Components
  3. Panels

Panels Panels can be used in almost any situation, helping wrap everything in a slick & lightweight container

About panels
The .panel containers are a perfect vessle to display your data, tables, forms or pictures. They are extreamly lightweight and clean. They can be expanded to fullscreen, collapsed or closed. They come with varity of options to display your data uniquely and draw focus where it is needed. Print the panel you need by making it fullscreen. You can also uniform the panels by adding the modifier .mod-panel-clean to body

Give your users access to create panel settings using localstorage. You can change colors, remember collapse state, lock location, and add drag functions to panels. Be sure to check out the our exclusive SmartPanels plugin.

Default Panel

All panels needs to have an unique ID in order to use the panel funtions. .panel is a container with no padding, .panel-hdr has a min-height value and default flexbox properties. The .panel-toolbar is inserted into .panel-hdr for extra elements. The .panel-container wraps .panel-content which has a predefined padding.

Default panel text.

Collapsed Panel

This panel is closed by default. To close a panel we add the class .panel-collapsed to .panel and .collapse to .panel-container

Default panel text.

Collapsable Panel

Panel is closed by using the attribute data-action="panel-collapse", and can be placed anywhere inside .panel

You can also place the collapse action inside the .panel-content as button or link

collapse link

Fullscreen Panel

Panel is closed by using the attribute data-action="panel-fullscreen", and can be placed anywhere inside .panel

You can also place the fullscreen action inside the .panel-content as button or link

fullscreen link

Close Panel

Panel is closed by using the attribute data-action="panel-close", and can be placed anywhere inside .panel

You can also place the fullscreen action inside the .panel-content as button or link

close link

Panel Colors

You can mix and match any color styles, below is what we were found to be an interesting match. Please note the colors will not be compatible with the modifier .mod-panel-clean

Panel master button

The .btn-toolbar-master button class is added to a dropdown button inside .panel-toolbar. It is a nice way to add dropdown functions and buttons to your .panel

Label Panel sup

11
Panel Badge
You may place badge inside .panel-toolbar, .panel-content and .panel-hdr. Check out the badge page to learn more about badges
Footer badge Pill badge 1 22

Form elements

You can add form elements to .panel-hdr and any other parts of the .panel

Form inputs

You can add form inputs to .panel-hdr with moderation. Adding too many elements may break the design on mobile viewport

Panel buttons

Add panel buttons to .panel-hdr and footer area. Keep in mind of your panel title size as distortion can occur with too many buttons overflowing.

Panel tabs

You can easily add .nav-tabs to .panel-hdr, consider adding dropdown panel button if you have a lot of panel tabs. Check out the Tabs & pills page for more details

Panel Pill

You can easily add .nav-pills to .panel-hdr, consider adding dropdown button if you have a lot of nav-pills. Check out the Tabs & pills page for more details

Panel progress bars

75%
Progress bars can be added to .panel-hdr and footer area. You can also customize the colors to make it stand out

Icons Panel

Easily replace panel buttons with icons using utility classes. Over 2500 icons to choose from