@shapla/vue-sidenav NPM

Shapla Side Navigation

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

npm install --save @shapla/vue-sidenav

with Sass:

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

with CSS:

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

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>

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`.

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
}
}

3 years ago