onoffcanvas

An offcanvas plugin

This plugin does not support any version of IE browser.

Please consider following this project's author, onokumus, and consider starring the project to show your ❤️ and support.

Getting started

Install

Install with npm:

npm install --save onoffcanvas

Install with yarn:

yarn add onoffcanvas

Download

download from github

Usage

commonjs

const OnoffCanvas = require('onoffcanvas');
const oc = new OnoffCanvas(element, options);

es2015 module or typescript

import OnoffCanvas from 'onoffcanvas';
const oc = new OnoffCanvas(element, options);

browser

1. Include onoffcanvas StyleSheet

<link rel="stylesheet" href="https://unpkg.com/onoffcanvas/dist/onoffcanvas.min.css">

2. Include onoffcanvas plugin's code

<script src="https://unpkg.com/onoffcanvas/dist/onoffcanvas.min.js"></script>

3. Add class onoffcanvas and id attribute to div tag.

<div class="onoffcanvas" id="side-canvas"></div>

4. Add trigger button: Be sure to add data-toggle="onoffcanvas".

<button data-toggle="onoffcanvas" data-target="#side-canvas">SIDE MENU</div>

5. a. Create new instance from Onoffcanvas

   // element is selector or Node
   new OnoffCanvas('#side-canvas', options);
   // OR
   new OnoffCanvas(document.querySelector('#side-canvas'), options);

   b. Auto init all OnoffCanvas elements

   OnoffCanvas.autoinit(options);

Options

hideByEsc

Type: Boolean Default: true

Hide OnoffCanvas element with ESC key

 new OnoffCanvas('#side-canvas', {
   hideByEsc: false
 });

or

 OnoffCanvas.autoinit({
   hideByEsc: false
 });

createDrawer

Type: Boolean Default: true

Creates an empty div element. Clicking on the div element, hides the OnoffCanvas.

 new OnoffCanvas('#side-canvas', {
   createDrawer: false
 });

or

 OnoffCanvas.autoinit({
   createDrawer: false
 });

Events

Event Type	Description
show.onoffcanvas	This event fires immediately when the show instance method is called.
hide.onoffcanvas	This event is fired immediately when the hide method has been called.

 new OnoffCanvas('#side-canvas')
 .on('show.onoffcanvas', (event)=>{
   console.log(event.type); // show.onoffcanvas
 }).on('hide.onoffcanvas',(event)=>{
   console.log(event.target); // <div class="onoffcanvas ...
 });

API

toggle

Show/Hide OnoffCanvas element

new OnoffCanvas('#side-canvas').toggle();

show

Show OnoffCanvas element

new OnoffCanvas('#side-canvas').show();

hide

Hide OnoffCanvas element

new OnoffCanvas('#side-canvas').hide();

Canvas Options

1. Position Options : onoffcanvas is in absolute position by default

• add class is-fixed to fixed position

<div class="onoffcanvas is-fixed"></div>

2. Direction Options : onoffcanvas is in full-screen by default

• is-top
• is-end (right in LTR, left in RTL)
• is-bottom,
• is-start (left in LTR, right in RTL)
• is-center

<div class="onoffcanvas is-{top|end|bottom|start|center}" id="side-canvas"></div>

3. Opened/Closed Options : onoffcanvas is closed by default

• add class is-open to open.

<div class="onoffcanvas is-open" id="side-canvas"></div>

4. Hoverable Options :

• add class onoffcanvas-container to parent element
• add class is-hoverable to onoffcanvas

<div class="onoffcanvas-container">
    <div class="onoffcanvas is-hoverable" id="side-canvas"></div>
</div>

Drawer Options

The background of the drawer is transparent. The following code should be added for the shadow.

.onoffcanvas-drawer.is-open {
  background-color: rgba(0,0,0,.5);
}

Trigger Options

• Type

  1. link with href

  <a href="#side-canvas" data-toggle="onoffcanvas" aria-expanded="false">toggle onoffcanvas</a>

  2. button with data-target

  <button data-target="#side-canvas" data-toggle="onoffcanvas" aria-expanded="false">toggle onoffcanvas</button>

• Style

  if you want to use the default style for onoffcanvas, add class onoffcanvas-toggler

  <a class="onoffcanvas-toggler" href="#side-canvas" data-toggle="onoffcanvas" aria-expanded="false"></a>

  OR

  <button class="onoffcanvas-toggler" data-target="#side-canvas" data-toggle="onoffcanvas" aria-expanded="false"></button>

Author

onokumus

• GitHub Profile
• Twitter Profile
• LinkedIn Profile

License

Copyright © 2021, onokumus. Released under the MIT License.