@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.

Package Sidebar

Install

npm i @onoffcanvas/jquery

Weekly Downloads

46

Version

0.1.0-alpha.1

License

MIT

Unpacked Size

42 kB

Total Files

11

Last publish

Collaborators

  • onokumus