vue-side-nav
for the best user-experience when navigating your side, you can use a responsive side-nav.
Demo
Install
npm install --save-dev vue-side-nav// vue touch@next - not released on npm currentlynpm install --save-dev git://github.com/vuejs/vue-touch.git#next // vue@1.0npm install --save-dev vue-side-nav@1 vue-touch@1
or include build/bundle.js
.
Usage
# somewhere Vueuserequire'vue-touch' # in your component components: "side-nav": require"vue-side-nav"# or, when using bundle.js components: "side-nav": windowvueCompssideNav
First Text<!-- sibling elements will be set to margin-left:240px for `fixed` and `is-fixed=true` -->
For examples see dev/
.
Props
Name | type | default | description |
---|---|---|---|
width | Number | 240 | width of the side-nav |
fixed-screen-size | Number | 992 | Used with fixed . Above this size, the menu will stay opened. |
not-dismissable | Boolean | false | A click on the overlay will not dismiss it |
close-on-click | Boolean | false | Any click within the side-nav will close it |
fixed | Boolean | false | should always show on large screens |
is-opened | Boolean | false | opens or closes the side-nav - use in conjuction with toggled event |
right | Boolean | false | attach to the right side instead of the left |
transition | Function | no-transition | will be called on open and close with {el,style,cb} . |
class | vue class | ["side-nav"] | class of the ul |
style | vue style | [] | style of the ul |
id | String | - | id of the ul |
opacity | Number | 0.5 | opacity of the overlay |
z-index | Number | 1000 | minimum zIndex of the overlay, cannot be lower than 100 (see vue-overlay for specifics) |
Menu will be visibile when either is-fixed or is-opened is true.
Events
Name | description |
---|---|
before-enter | will be called before open animation |
after-enter | will be called when opened |
before-leave | will be called before close animation |
after-leave | will be called when closed |
fixed(isFixed:Boolean) | emitted when menu get fixed or unfixed on large screen. |
toggled(isOpened:Boolean) | emitted when menu gets opened or closed. |
Transition
You can provide a transition like this:
Velocity = template: "<side-nav transition='moveIn'></side-nav>"methods: { Velocity el "stop" Velocity el style duration: 300 queue: false easing: 'easeOutQuad' complete: cb }
The background is managed by vue-overlay
.
See here for an example on how to change its fading function.
Changelog
-
2.0.0
now compatible with vue 2.0.0
close overlay on destroy -
1.1.0
events are renamed after vue transitions
added toggled event -
1.0.1
addedz-index
prop -
1.0.0
renamedhide-on-screen-size
tofixed-screen-size
-
0.3.0
renamednot-dismissible
tonot-dismissable
. addedclose-on-click
Development
Clone repository.
npm installnpm run dev
Browse to http://localhost:8080/
.
License
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.