Noiseless Party Machine

    @shapla/vue-sidenav

    1.0.0 • Public • Published

    Shapla Side Navigation

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

    Table of contents

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

    Install

    npm i @shapla/vue-sidenav

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    20.5 kB

    Total Files

    14

    Last publish

    Collaborators

    • sayful