Wondering what’s next for npm?Check out our public roadmap! »

vue-another-sidebar

1.0.2 • Public • Published

Vue.js slideout sidebar

Note: please do not use for production. It is incomplete and will be have several sever updates.

Installation

npm install --save vue-another-sidebar

Usage

 
//app.js
 
...
import { Sidebar, SidebarTrigger } from 'vue-another-sidebar';
...
 
const app = new Vue({
    store,
    ...
    components: {
        ...
        Sidebar,
        SidebarTrigger
    }
}).$mount('#app')
 
<!-- app.html -->
...
<div id="app">    
    <sidebar off-canvas></sidebar>
    <div class="content off-canvas">
        ...
        <sidebar-trigger></sidebar-trigger>
        ...
    </div>
</div>
 

Components in the bundle

  • Sidebar: main component to display slideout sidebar
  • SidebarTrigger: a button to show/hide sidebar

External dependencies

  • vuex to store show/hide state
  • invert-color a ui helper to keep color of closer icon (x) contrast to sidebar background

Sidebar component options

  • width: sidebar width (px). Default: 220
  • bgcolor: sidebar background color. Default: #EEEEEE
  • speed: transition speed. Default: 0.3
  • right: show from the right. Default: false
  • close-size: close icon font size. Close icon represented by html × symbol. Default: 60
  • off-canvas: shift content on show. Shifted content must have 'off-canvas' class. Default: false

Install

npm i vue-another-sidebar

DownloadsWeekly Downloads

3

Version

1.0.2

License

MIT

Unpacked Size

11.6 kB

Total Files

10

Last publish

Collaborators

  • avatar