onoffcanvas

An offcanvas plugin

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

 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-right
• is-bottom,
• is-left
• is-center

<div class="onoffcanvas is-{top|right|bottom|left|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 © 2018, onokumus. Released under the MIT License.

This file was generated by verb-generate-readme, v0.8.0, on September 05, 2018.