- Docs
- Offcanvas
Offcanvas Component
Implement and customize the Offcanvas component for sliding panels and sidebars.
The Offcanvas component allows you to create a sliding panel that appears from the side of the screen, commonly used for navigation menus or sidebars. This component is fully customizable, supporting backdrop visibility, body scroll control, and various lifecycle hooks for more control over its behavior.
Installation
To use the Offcanvas component, you can install it via npm:
Structure
HTML Markup
Markup Structure
-
offcanvas-trigger
: Element that trigger the Offcanvas, withdata-offcanvas-trigger
anddata-target
attributes, the value ofdata-target
must be the targeted offcanvas. -
offcanvas-element
: The modal element, must have aid
-
close-offcanvas-elements
: any element inside theoffcanvas-element
withdata-offcanvas-close
attribute
Here is a basic example of how to structure your offcanvas/SliderOver and trigger elements in HTML:
<!-- Trigger Button -->
<button data-offcanvas-target="myOffcanvas" aria-haspopup="dialog">Open Offcanvas</button>
<!-- Offcanvas Panel -->
<div id="myOffcanvas" role="dialog" aria-hidden="true" class="offcanvas" >
<button class="offcanvas-close-btn" aria-label="Close Offcanvas">X</button>
<p>This is the offcanvas content!</p>
</div>
- Adding a overlay element
<div id="myOffcanvas" role="dialog" aria-hidden="true" class="offcanvas" data-offcanvas-backdrop="your backdrop classes"></div>
Example
<button data-offcanvas-trigger data-target="slide-over-from-left"
aria-controls="slide-over-from-left" class="bg-neutral8 text-white px4 py2 rd-lg text-sm">
Open from left
</button>
<div data-fx-offcanvas data-slideover-from-left
id="slide-over-from-left" aria-labelledby="slide-over-from-left"
class="fixed h100dvh wfull max-wsm -left-full top-0 fx-open-left-0 z90 ease-linear duration-200 p4 bg-zinc1 dark-bg-zinc9 flex">
<div class="size-full b b-dashed b-zinc2 dark-b-zinc8">
<button data-offcanvas-close class="p4">
Close it
</button>
</div>
</div>
Offcanvas Options
The Offcanvas component can be customized using the
OffcanvasOptions
object, which provides control over backdrop visibility, body scroll behavior, and event hooks. staticBackdrop
Prevents the offcanvas from being closed by clicking the backdrop. Useful for alert or confirmation-type offcanvas components.
- Type:
boolean
- Default:
false
allowBodyScroll
Allows the body to scroll while the offcanvas is open. Set this to
false
to lock body scrolling. - Type:
boolean
- Default:
false
backdrop
Setting the backdrop classes
Example:
<button data-offcanvas-trigger data-target="slide-over-overlay" aria-controls="slide-over-overlay" class="bg-neutral8 text-white px4 py2 rd-lg text-sm">
Overlay
</button>
<div data-offcanvas-withbackdrop id="slide-over-overlay" aria-labelledby="slide-over-overlay" class="fixed h100dvh wfull max-wsm -right-full top-0 fx-open-right-0 ease-linear duration-200 p4 bg-zinc1 dark-bg-zinc9 flex z90">
<div class="size-full b b-dashed b-zinc2 dark-b-zinc8"></div>
</div>
<button data-offcanvas-trigger data-target="slide-over-overlay1" aria-controls="slide-over-overlay1" class="bg-neutral8 text-white px4 py2 rd-lg text-sm">
Overlay with blur
</button>
<div data-offcanvas-backdrop-blur id="slide-over-overlay1" aria-labelledby="slide-over-overlay1" class="fixed h100dvh wfull max-wsm -right-full top-0 fx-open-right-0 ease-linear duration-200 p4 bg-zinc1 dark-bg-zinc9 flex z90">
<div class="size-full b b-dashed b-zinc2 dark-b-zinc8"> </div>
</div>
beforeHide
A function that executes right before the offcanvas is hidden. Returning
{ cancelAction: true }
will prevent the offcanvas from closing. - Type:
() => { cancelAction?: boolean; } | void
beforeShow
A function that executes before the offcanvas is shown.
- Type:
() => void
onShow
A callback function that triggers when the offcanvas is shown.
- Type:
() => void
onHide
A callback function that triggers when the offcanvas is hidden.
- Type:
() => void
Initialization Example
Here’s an example of initializing an offcanvas with custom options:
import { Offcanvas } from '@flexilla/offcanvas';
const offcanvas = new Offcanvas('#myOffcanvas', {
staticBackdrop: true,
allowBodyScroll: false,
backdrop: 'custom-backdrop-class',
beforeHide() {
console.log('Before offcanvas hides');
return { cancelAction: false }; // You can cancel hide by setting cancelAction to true
},
beforeShow() {
console.log('Before offcanvas shows');
},
onShow() {
console.log('Offcanvas is shown');
},
onHide() {
console.log('Offcanvas is hidden');
}
});
Methods
open()
Programmatically opens the offcanvas.
offcanvas.open();
close()
Programmatically closes the offcanvas.
offcanvas.close();