Sidepanel

You can show lists, forms, notifications, or other custom contents into the Falcon Sidepanel

Show Sidepanel
Structure

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.

Thank you for creating with Falcon |
2021 © Themewagon

v3.2.0

customize