snitchbot | Dashboard & Remote Field Sensing

Sidepanel

You can show lists, forms, notifications, or other custom contents into the Falcon 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 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.