Skip to content
OffCanvas vue component.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
config
src-docs
src
static
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.npmignore
README.md
package.json

README.md

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

Features

  • a11y friendly.
  • Support multiples OffCanvas.
  • You can optionallity push your content when the OffCanvas is open.

Getting Started

Install the package using npm

$ npm install wovue-off-canvas --save

Install the plugin

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

<wv-off-canvas ref="menu">
  <!-- off-canvas content -->
</wv-off-canvas>
<wv-off-cannvas-wrap>
  <!-- content to push -->
  <button v-off-canvas:toggle="menu" type="button">Toggle menu</button>
</wv-off-cannvas-wrap>

Development

# 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
You can’t perform that action at this time.