https://github.com/wovue/off-canvas
OffCanvas vue component.
https://github.com/wovue/off-canvas
Last synced: 8 months ago
JSON representation
OffCanvas vue component.
- Host: GitHub
- URL: https://github.com/wovue/off-canvas
- Owner: wovue
- Created: 2016-09-13T00:49:47.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-01T02:26:59.000Z (about 9 years ago)
- Last Synced: 2025-03-22T08:45:57.665Z (8 months ago)
- Language: Vue
- Homepage: https://wovue.github.io/off-canvas/
- Size: 713 KB
- Stars: 24
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-refactor - vue-off-canvas
- awesome-vuejs - vue-off-canvas - A dialog component for Vue.js. <sup>1.x compatible</sup> (Awesome Vue.js / Component Collections)
README
# OffCanvas
> OffCanvas (Sidenav/Drawer) component for Vue.js
Create a smooth off-canvas sidebar that slides in and out of the page.
## Live examples & Docs
[https://wovue.github.io/off-canvas](https://wovue.github.io/off-canvas)
## Features
* a11y friendly.
* Support multiples OffCanvas.
* You can optionallity push your content when the OffCanvas is open.
## Getting Started
Install the package using npm
```sh
$ npm install wovue-off-canvas --save
```
Install the plugin
```js
require('wovue-off-canvas/dist/off-canvas.css')
import Vue from 'vue'
import OffCanvas from 'wovue-off-canvas'
Vue.use(OffCanvas)
```
**Note** only with `webpack` you can import `CSS` in javascript.
## Basic Usage
```html
Toggle menu
```
## Development
``` bash
# install dependencies
npm install
# serve with hot reload src-docs at localhost:8080
npm run dev
# build for production with minification src-docs and src
npm run build
# copy docs folder to gh-pages branch and push
npm run deploy-docs
```