Wondering what’s next for npm?Check out our public roadmap! »

    onoffcanvas
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    onoffcanvas NPM version NPM monthly downloads NPM total downloads

    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">
    1. Include onoffcanvas plugin's code
    <script src="https://unpkg.com/onoffcanvas/dist/onoffcanvas.min.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-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>
    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 © 2021, onokumus. Released under the MIT License.

    Install

    npm i onoffcanvas

    DownloadsWeekly Downloads

    27

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    84.2 kB

    Total Files

    27

    Last publish

    Collaborators

    • avatar