This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@shapla/vue-sidenav

Shapla Side Navigation

A simple side overlay navigation. Normally to use to develop admin panel.

Table of contents

• Installation
• Usage

Installation

npm install --save @shapla/vue-sidenav

Usage

Styles

with Sass:

import '@shapla/vue-sidenav/src/index.scss';

with CSS:

import '@shapla/vue-sidenav/dist/style.css';

Javascript Instantiation

import ShaplaSidenav from '@shapla/vue-sidenav';

export default {
  name: 'Hello',

  components: {
    ShaplaSidenav
  }
}

<shapla-sidenav :active="true" nav-width="300px" position="left" :show-overlay="true">
  Nav content goes here
</shapla-sidenav>

Props

Property	Type	Required	Default	Description
active	Boolean	no	true	If set true, side navigation will be opened.
showOverlay	Boolean	no	true	If set true, overlay background will be shown
navWidth	String	no	300px	Sidenav width in pixels.
position	String	no	left	Value can be left or right.

Listeners

The side navigation component fires the following events:

close: When outside area is clicked, it fires the event.

<!-- template -->
<shapla-sidenav @close="handleClose"></shapla-sidenav>


<!-- method -->
methods: {
handleClose(){
// Handle close event
}
}