Sidepanel
You can show lists, forms, notifications, or other custom contents into the Falcon Sidepanel.
Show SidepanelStructure
Falcon Sidepanel uses Boostrap Modal features to show the panel content. .modal-fixed-right
and .modal-dialog-vertical
classes are used to stick the panel at the right side and animate the panel from right to left.
<div class="modal fade modal-fixed-right modal-theme overflow-hidden" id="settings-modal" tabindex="-1" role="dialog" aria-labelledby="settings-modal-label" aria-hidden="true" data-options='{"autoShow":true,"autoShowDelay":3000,"showOnce":true}'>
<div class="modal-dialog modal-dialog-vertical" role="document">
<div class="modal-content border-0 vh-100 scrollbar perfect-scrollbar">
<div class="modal-header modal-header-settings">
<!-- Header Content-->
</div>
<div class="modal-body">
<!-- Body Content-->
</div>
</div>
</div>
</div>
Options
You can pass options via data-options
through .modal-theme
element. It will decide whether the panel is shown or remain hidden when the page loads.
data-options | object |
---|---|
Example |
data-options={"autoShow": true, "autoShowDelay": 3000, "showOnce": true, "cookieExpireTime": 7200000}} |
Option | Type | Defaults | Description |
---|---|---|---|
autoShow | Boolean |
false |
Set true to make the Slidepanel show automatically after the page is loaded. |
autoShowDelay | Number |
0 |
How much time (ms) should wait after the page is loaded before showing the Sidepanel. Works only when the autoShow is set true |
showOnce | Boolean |
false |
The Sidepanel will show only once - for the first time when a user view the website and remain hidden as per the cookie expiration date. |
cookieExpireTime | Number |
7200000 |
After how many time (ms) the cookie will expired. |