Offcanvas

Deprecated, use wovue-off-canvas instead.

The wovue-offcanvas module contains the offcanvas component. You can add multiples offcanvas and offcanvas-wrapper.

Install using npm:

$ npm install --save wovue-offcanvas

Note this will only works with webpack build system.

Usage

import { WvOffcanvas, WvOffcanvasButton, WvOffcanvasWrapper } from 'wovue-offcanvas'

new Vue({
  components: {
    WvOffcanvas,
    WvOffcanvasButton,
    WvOffcanvasWrapper
  }
})

<wv-offcanvas ref="menu" wrapper-ref="main" align="right" :width="300">
  <wv-offcanvas-button offcanvas-ref="menu" >Toggle menu offcanvas</wv-offcanvas-button>
  <!-- here offcanvas content -->
</wv-offcanvas>
<wv-offcanvas-wrapper ref="main">
  <wv-offcanvas-button offcanvas-ref="menu" >Toggle menu offcanvas</wv-offcanvas-button>
  <!-- here your content -->
</wv-offcanvas-wrapper>

Props

offcanvas-wrapper

| Name | Type | Default | Description | |------|:----:|:--------|:------------| | ref | String | (required) | A unique identifier for the offcanvas-wrapper. | | showOverlay | Boolean | true | Show the overlay or no. Click over the overlay will close the current offcanvas. | | push | Boolean | true | Push content if it is true. | | modifier | String, Boolean | false | Modifier class name for custom style rules. |

offcanvas

| Name | Type | Default | Description | |------|:----:|:--------|:------------| | ref | String | (required) | A unique identifier for the offcanvas. | | wrapperRef | String | (required) | Offcanvas wrapper reference. | | align | String | 'left' | Offcanvas position. The support align values are left and right. | | width | Number | 300 | Offcanvas width. | | modifier | String, Boolean | false | Modifier class name for custom style rules. |

offcanvas-button

| Name | Type | Default | Description | |------|:----:|:--------|:------------| | offcanvasRef | String | (required) | Offcanvas reference. |