1.0.2 • Published 4 years ago

shapla-side-navigation v1.0.2

Weekly downloads
9
License
MIT
Repository
github
Last release
4 years ago

Shapla Side Navigation

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

Table of contents

Installation

npm i shapla-side-navigation

Usage

Add the component:

import sideNavigation from 'shapla-side-navigation';

export default {
  name: 'Hello',

  components: {
    sideNavigation
  }
}
<side-navigation :active="true" nav-width="300px" position="left" :show-overlay="true">
    Nav content goes here
</side-navigation>

Props

PropertyTypeRequiredDefaultDescription
activeBooleannotrueIf set true, side navigation will be opened.
showOverlayBooleannotrueIf set true, overlay background will be shown
navWidthStringno300pxSidenav width in pixels.
positionStringnoleftValue 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 -->
<side-navigation @close="handleClose"></side-navigation>


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