Victoria Baker
Senior developer
Page sliding panels
Sliding panels are fully based on default Bootstrap modal component that was extended to support 4 locations and visibility options. They also use modal markup and all available modal JS options. Table below contains basic panel dialog examples. Click
Launch button to run panel examples.
| Position | ||
|---|---|---|
| Right panel | Basic sliding panel, sticked to the right. Requires .modal-right class to be added to the main container. Panel body is scrollable by default |
|
| Left panel | Basic sliding panel, sticked to the left. Requires .modal-left class to be added to the main container. Panel body is scrollable by default |
|
| Top panel | Basic sliding panel, sticked to the top. Requires .modal-top class to be added to the main container. Useful for text messages and actions. Not scrollable and takes all available space |
|
| Bottom panel | Basic sliding panel, sticked to the bottom. Requires .modal-bottom class to be added to the main container. Useful for text messages and actions. Not scrollable and takes all available space |
|
| Content | ||
| Tabbed content | Vertical panel with justified tabs. Content is scrollable | |
| Header with subtitle | Panel supports header and footer. Header can contain single or multiple lines of text (title and subtitle) in different colors and sizes | |
| Centered content | Panel body text can be centered in 2 directions - vertical and horizontal. Useful for showing empty statuses, errors or actions. | |
| Sticky footer | Panels also support footers. Headers are always sticked to the top, footers to the bottom and body is scrollable. | |
| Options | ||
| Disable backdrop | Disabled backdrop. Disable backdrop element using data-backdrop="false". Clicking outside doesn't close the panel, but Escape key works as expected |
|
| Static backdrop | Alternatively, specify static for a backdrop which doesn't close the panel on click |
|
| Disable keyboard interaction | Disabled keyboard interaction. If keyboard option is set to true (default), the panel can be closed when escape key is pressed |
|
| Disable animation | Disabled animation. For panels that simply appear rather than fade in to view, remove the .fade class from your panel markup |
|
| Remote source | Load remote source with vanilla JS. Optionally you can add loading animation. Content is injected in onShow callback |
|
| Panel sizing | ||
| Mini size | Panel in mini size. Mini panel width is 56px (default icon size + 20px padding on both sides). To use, add modal-xs class to .modal-dialog container |
|
| Small size | Panel in small size. Small panel width is 156px (mini size + additional 50px on both sides). To use, add modal-sm class to .modal-dialog container |
|
| Default size | Panel in default size. Default panel width is 320px. Since this is a default size, panel markup doesn't require any additional sizing classes |
|
| Large size | Panel in large size. Large panel width is 420px. To use, add modal-lg class to .modal-dialog container |
|
| Optional panel header/footer colors | ||
| Default theme | Default color theme. All areas of this panel have transparent background color. Doesn't require any additional contextual classes |
|
| Primary header/footer | Primary color theme. To use, add .bg-primary class to .modal-header and/or .modal-footer container |
|
| Danger header/footer | Danger color theme. To use, add .bg-danger class to .modal-header and/or .modal-footer container |
|
| Success header/footer | Success color theme. To use, add .bg-success class to .modal-header and/or .modal-footer container |
|
| Warning header/footer | Warning color theme. To use, add .bg-warning class to .modal-header and/or .modal-footer container |
|
| Info header/footer | Info color theme. To use, add .bg-warning class to .modal-header and/or .modal-footer container |
|
| Dark header/footer | Dark color theme. To use, add .bg-dark class to .modal-header and/or .modal-footer container |
|
| Light header/footer | Light color theme. To use, add .bg-light class to .modal-header and/or .modal-footer container |
|
| Custom color theme | Custom color theme. To use, add .bg-[pink|purple|indigo|teal|yellow] and .text-white classes from the color system to .modal-header and/or .modal-footer container |
|
| Panel events | ||
| onShow event | This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event |
|
| onShown event | This event is fired when the panel has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event |
|
| onHide event | This event is fired immediately when the hide instance method has been called |
|
| onHidden event | This event is fired when the panel has finished being hidden from the user (will wait for CSS transitions to complete) | |