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.

Raptus capios ducunt ad genetrix. Joy doesn’t beautifully respect any believer — but the power is what flies.

                    <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="...".

Raptus capios ducunt ad genetrix. Joy doesn’t beautifully respect any believer — but the power is what flies. Raptus capios ducunt ad genetrix. Joy doesn’t beautifully respect any believer — but the power is what flies.

                    <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="...".

Raptus capios ducunt ad genetrix. Joy doesn’t beautifully respect any believer — but the power is what flies.

                    <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".

Raptus capios ducunt ad genetrix. Joy doesn’t beautifully respect any believer — but the power is what flies.
Raptus capios ducunt ad genetrix. Joy doesn’t beautifully respect any believer — but the power is what flies.

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

Raptus capios ducunt ad genetrix. Joy doesn’t beautifully respect any believer — but the power is what flies.

                    <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".

Raptus capios ducunt ad genetrix. Joy doesn’t beautifully respect any believer — but the power is what flies.

                    <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
X: 0
Y: 0
Raptus capios ducunt ad genetrix. Joy doesn’t beautifully respect any believer — but the power is what flies.

                    <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

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
Raptus capios ducunt ad genetrix. Joy doesn’t beautifully respect any believer — but the power is what flies.

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