An offcanvas plugin
npm install onoffcanvas> 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 :heart: and support.
``sh`
npm install --save onoffcanvas
Install with yarn:
`sh`
yarn add onoffcanvas
> commonjs
`js`
const OnoffCanvas = require('onoffcanvas');
const oc = new OnoffCanvas(element, options);
> es2015 module or typescript
`js`
import OnoffCanvas from 'onoffcanvas';
const oc = new OnoffCanvas(element, options);
> browser
1. Include onoffcanvas StyleSheet
`html`
2. Include onoffcanvas plugin's code`
html`
3. Add class onoffcanvas and id attribute to div tag.`
html`
4. Add trigger button: Be sure to add data-toggle="onoffcanvas".`
html
5.
a. Create new instance from Onoffcanvas
js
// element is selector or Node
new OnoffCanvas('#side-canvas', options);
// OR
new OnoffCanvas(document.querySelector('#side-canvas'), options);
` b. Auto init all OnoffCanvas elements
js
OnoffCanvas.autoinit(options);
`$3
#### hideByEsc
Type:
Default: > Hide OnoffCanvas element with ESC key
js
new OnoffCanvas('#side-canvas', {
hideByEsc: false
});
`or
js
OnoffCanvas.autoinit({
hideByEsc: false
});
`#### createDrawer
Type:
Default: > Creates an empty
element. Clicking on the div element, hides the OnoffCanvas.`js
new OnoffCanvas('#side-canvas', {
createDrawer: false
});
`or
js
OnoffCanvas.autoinit({
createDrawer: false
});
`Events
|Event Type |Description|
|--------------|--------------|
|show.onoffcanvas |This event fires immediately when the
instance method is called.|
|hide.onoffcanvas |This event is fired immediately when the hide method has been called. |`js
new OnoffCanvas('#side-canvas')
.on('show.onoffcanvas', (event)=>{
console.log(event.type); // show.onoffcanvas
}).on('hide.onoffcanvas',(event)=>{
console.log(event.target); // $3
#### toggle
Show/Hide OnoffCanvas element
`js
new OnoffCanvas('#side-canvas').toggle();
`
#### show
Show OnoffCanvas element
js
new OnoffCanvas('#side-canvas').show();
`
#### hide
Hide OnoffCanvas element
js
new OnoffCanvas('#side-canvas').hide();
`$3
1. Position Options :
is in absolute position by default
- add class is-fixed to fixed position
`html
`2. Direction Options :
is in full-screen by default
- is-top
- (right in LTR, left in RTL)
- is-bottom,
- is-start (left in LTR, right in RTL)
- is-center
html
`3. Opened/Closed Options :
is closed by default
- add class is-open to open.
`html
`4. Hoverable Options :
- add class
to parent element
- add class is-hoverable to onoffcanvashtml
`$3
The background of the drawer is transparent. The following code should be added for the shadow.
css
.onoffcanvas-drawer.is-open {
background-color: rgba(0,0,0,.5);
}
`
$3
- Type
1. link with
html
toggle onoffcanvas
` 2. button with
html
`- Style
> if you want to use the default style for
, add class onoffcanvas-toggler
html
` OR
html
``$3
onokumus
+ GitHub Profile
+ Twitter Profile
+ LinkedIn Profile$3
Copyright © 2021, onokumus.
Released under the MIT License.