@onoffcanvas/js

onoffcanvas vanillaJs package

Usage no npm install needed!

<script type="module">
  import onoffcanvasJs from 'https://cdn.skypack.dev/@onoffcanvas/js';
</script>

README

@onoffcanvas/js NPM version NPM monthly downloads NPM total downloads

onoffcanvas vanillaJs package

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

Getting started

Install

Install with npm:

$ npm install --save @onoffcanvas/js

Install with yarn:

$ yarn add @onoffcanvas/js

Usage

commonjs

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

es2015 module or typescript

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

browser

  1. Include onoffcanvas StyleSheet
<link rel="stylesheet" href="https://unpkg.com/@onoffcanvas/core/dist/onoffcanvas.min.css">
  1. Include onoffcanvas plugin's code
<script src="https://unpkg.com/@onoffcanvas/js"></script>
  1. Add class onoffcanvas and id attribute to div tag.
<div class="onoffcanvas" id="side-canvas"></div>
  1. Add trigger button: Be sure to add data-toggle="onoffcanvas".
<button data-toggle="onoffcanvas" data-target="#side-canvas">SIDE MENU</div>

  1. 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>
  1. 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>
  1. Opened/Closed Options : onoffcanvas is closed by default
  • add class is-open to open.
<div class="onoffcanvas is-open" id="side-canvas"></div>
  1. 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>
    1. 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

License

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

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