Have ideas to improve npm?Join in the discussion! »

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

    0.1.0-alpha.1 • Public • Published

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

    onoffcanvas jQuery package

    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/jquery

    Install with yarn:

    $ yarn add @onoffcanvas/jquery

    Usage

    commonjs

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

    es2015 module or typescript

    import OnoffCanvas from '@onoffcanvas/jquery';
    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/jquery"></script>
    <script src="https://unpkg.com/@onoffcanvas/jquery"></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>

    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>

    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.

    Install

    npm i @onoffcanvas/jquery

    DownloadsWeekly Downloads

    92

    Version

    0.1.0-alpha.1

    License

    MIT

    Unpacked Size

    42 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar