- Notifications
You must be signed in to change notification settings - Fork8
vue-comps/vue-side-nav
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
DEPRECATED seecerijs andceri-side-nav
for the best user-experience when navigating your side, you can use a responsive side-nav.
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 includebuild/bundle.js.
# somewhereVue.use(require('vue-touch'))# in your componentcomponents:"side-nav":require("vue-side-nav")# or, when using bundle.jscomponents:"side-nav":window.vueComps.sideNav
<side-nav><li>First Text<li></side-nav><!-- sibling elements will be set to margin-left:240px for `fixed` and `is-fixed=true` --><container></container>
For examples seedev/.
Currentlybuble is injectingstrict mode in all processed js files. The down to ES5 compiled component containswith, which is forbidden instrict mode.Buble is used, for example, in rollup, which is used in laravel.
If you are running in this problem, make sure to exclude this component from processing with buble.
| Name | type | default | description |
|---|---|---|---|
| width | Number | 240 | width of the side-nav |
| fixed-screen-size | Number | 992 | Used withfixed. 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 withtoggled 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 theul |
| style | vue style | [] | style of theul |
| id | String | - | id of theul |
| opacity | Number | 0.5 | opacity of the overlay |
| z-index | Number | 1000 | minimum zIndex of the overlay, cannot be lower than 100 (seevue-overlay for specifics) |
Menu will be visibile when either is-fixed or is-opened is true.
| 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. |
You can provide a transition like this:
Velocity=require("velocity-animate")template:"<side-nav transition='moveIn'></side-nav>",methods:{moveIn:function({el,style,cb}){Velocityel,"stop"Velocityel,style,{duration:300,queue:false,easing:'easeOutQuad',complete:cb}}}
The background is managed byvue-overlay.Seehere for an example on how to change its fading function.
2.0.0
now compatible with vue 2.0.0
close overlay on destroy1.1.0
events are renamed after vue transitions
added toggled event1.0.1
addedz-indexprop1.0.0
renamedhide-on-screen-sizetofixed-screen-size0.3.0
renamednot-dismissibletonot-dismissable. addedclose-on-click
Clone repository.
npm installnpm run dev
Browse tohttp://localhost:8080/.
Copyright (c) 2016 Paul PflugradtLicensed under the MIT license.
About
side-nav - done in vue
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.