Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/onokumus/onoffcanvas
An offcanvas plugin
https://github.com/onokumus/onoffcanvas
off-canvas
Last synced: about 2 months ago
JSON representation
An offcanvas plugin
- Host: GitHub
- URL: https://github.com/onokumus/onoffcanvas
- Owner: onokumus
- License: mit
- Created: 2017-02-23T22:17:19.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-06-01T19:50:01.000Z (7 months ago)
- Last Synced: 2024-10-12T06:47:05.811Z (2 months ago)
- Topics: off-canvas
- Language: TypeScript
- Homepage: https://onokumus.github.io/onoffcanvas/
- Size: 317 KB
- Stars: 28
- Watchers: 5
- Forks: 8
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# onoffcanvas [](https://www.npmjs.com/package/onoffcanvas) [](https://npmjs.org/package/onoffcanvas) [](https://npmjs.org/package/onoffcanvas)
> An offcanvas plugin
> This plugin does not support any version of IE browser.
Please consider following this project's author, [onokumus](https://github.com/onokumus), and consider starring the project to show your :heart: and support.
## Getting started
### Install
Install with [npm](https://www.npmjs.com/):
```sh
npm install --save onoffcanvas
```
Install with [yarn](https://yarnpkg.com):
```sh
yarn add onoffcanvas
```
### Download
[download from github](https://github.com/onokumus/onoffcanvas/archive/master.zip)
### Usage
> 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
SIDE MENU
```
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);
```
### Options
#### hideByEsc
Type: `Boolean`
Default: `true`
> Hide OnoffCanvas element with ESC key
```js
new OnoffCanvas('#side-canvas', {
hideByEsc: false
});
```
or
```js
OnoffCanvas.autoinit({
hideByEsc: false
});
```
#### createDrawer
Type: `Boolean`
Default: `true`
> Creates an empty `div` 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 `show` 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); //
```
2. 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`
```html
```
3. Opened/Closed Options : `onoffcanvas` is closed by default
- add class `is-open` to open.
```html
```
4. Hoverable Options :
- add class `onoffcanvas-container` to parent element
- add class `is-hoverable` to `onoffcanvas`
```html
```
### Drawer Options
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);
}
```
### Trigger Options
- Type
1. link with `href`
```html
toggle onoffcanvas
```
2. button with `data-target`
```html
toggle onoffcanvas
```
- Style
> if you want to use the default style for `onoffcanvas`, add class `onoffcanvas-toggler`
OR
```html
```
### Author
**onokumus**
+ [GitHub Profile](https://github.com/onokumus)
+ [Twitter Profile](https://twitter.com/onokumus)
+ [LinkedIn Profile](https://linkedin.com/in/onokumus)
### License
Copyright © 2021, [onokumus](https://github.com/onokumus).
Released under the [MIT License](LICENSE).