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">
<div class="modal-header modal-header-settings">
<!-- Header Content-->
</div>
<div class="modal-body px-card">
<!-- 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. |
