Panel
Group the information and focus the user's attention on it using the panel.
Create panel
To create panel, add attribute data-role="panel" to element.
<div data-role="panel">
...
</div>
Create panel with your own size
To create panel with your own size, use attributes data-width="..." and data-height="...".
<div data-role="panel" data-width="280" data-height="150">
...
</div>
Panel title
For more information, you can add a title to the panel.
To add title you must add or title caption or title icon.
To add caption use attribute data-title-caption="...",
to add icon use attribute data-title-icon="...".
<div data-role="panel"
data-title-caption="Panel title"
data-title-icon="<span class='mif-apps'></span>">
...
</div>
For title icon you must use a valid html tag. It can be icon from font or image.
Collapsible panel
If you need to create collapsing panel, add attribute data-collapsible="true" to element.
To start panel in collapsed state, add attribute data-collapsed="true".
<div data-role="panel"
data-title-caption="Panel title"
data-collapsible="true">
...
</div>
<div data-role="panel"
data-title-caption="Panel title"
data-collapsed="true"
data-collapsible="true">
...
</div>
Custom buttons
You can add a custom buttons to panel title. To add custom buttons use attribute data-custom-buttons. Value for this attribute must be a predefined object.
<script>
var customButtons = [
{
html: "<span class='mif-rocket'></span>",
cls: "sys-button",
onclick: "alert('You press rocket button')"
},
{
html: "<span class='mif-user'></span>",
cls: "alert",
onclick: "alert('You press user button')"
},
{
html: "<span class='mif-cog'></span>",
cls: "warning",
onclick: "alert('You press cog button')"
}
];
</script>
<div data-role="panel"
data-title-caption="Panel title"
data-collapsible="true"
data-custom-buttons="customButtons">...</div>
Draggable
You can create draggable panel with attribute data-draggable="true".
<div data-role="panel"
data-title-caption="Panel title"
data-title-icon="<span class='mif-apps'></span>"
data-width="240"
data-collapsible="true"
data-draggable="true">
...
</div>
Events
When panel works, it generated the numbers of events. You can use callback for this events to behavior with panel.
| Event | Data-* | Desc |
|---|---|---|
| onCollapse(el) | data-on-collapse |
Fired when panel was collapsed |
| onExpand(el) | data-on-expand |
Fired when panel was expanded |
| onDragStart(pos, el) | data-on-drag-start |
Fired when panel drag started |
| onDragStop(pos, el) | data-on-drag-stop |
Fired when panel drag stopped |
| onDragMove(pos, el) | data-on-drag-move |
Fired when panel drag moved |
| onPanelCreate(el) | data-on-panel-create |
Fired when panel was created |
<div class="row h-100">
<div class="stub bg-light" style="width: 100px">
<div>X: <span id="panel_ev_x">0</span></div>
<div>Y: <span id="panel_ev_y">0</span></div>
</div>
<div class="cell">
<div data-role="panel"
data-title-caption="Panel title"
data-title-icon="<span class='mif-apps'></span>"
data-width="240"
data-collapsible="true"
data-draggable="true"
data-on-drag-move="
var pos = arguments[0];
$('#panel_ev_x').text(pos.x);
$('#panel_ev_y').text(pos.y);
"
>
Raptus capios ducunt ad genetrix...
</div>
</div>
</div>
Methods
You can use panel methods to interact with the component.
- collapse() - collapse panel
- expand() - expand panel
- customButtons() - add custom buttons
Customize
If you need to customize the slider, you can use next options:
| Option | Data-* | Desc |
|---|---|---|
| clsPanel | data-cls-panel |
Additional class for panel |
| clsTitle | data-cls-title |
Additional class for panel title |
| clsTitleCaption | data-cls-title-caption |
Additional class for panel title caption |
| clsTitleIcon | data-cls-title-icon |
Additional class for panel title icon |
| clsContent | data-cls-content |
Additional class for panel content |
| clsCollapseToggle | data-cls-collapse-toggle |
Additional class for panel collapse toggle |
<div class="mx-auto"
data-role="panel"
data-width="280"
data-title-caption="Panel title"
data-title-icon="<span class='mif-apps'></span>"
data-collapsible="true"
data-cls-panel="shadow-3"
data-cls-title="bg-red fg-white"
data-cls-title-icon="bg-green fg-white"
data-cls-content="bg-cyan fg-white"
data-cls-collapse-toggle="bg-dark fg-white marker-light"
>
Raptus capios ducunt ad genetrix.
Joy doesn’t beautifully respect any believer —
but the power is what flies.
</div>