core package, required by other packages

Usage no npm install needed!

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


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

core package, required by other packages

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

Getting started


Install with npm:

$ npm install --save @onoffcanvas/core

Install with yarn:

$ yarn add @onoffcanvas/core



The "onoffcanvas.css" file in the "dist" folder is available.


<link rel="stylesheet" href="https://unpkg.com/@onoffcanvas/core/dist/onoffcanvas.min.css">

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>




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

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