@jeremyhamm/vue-slider
A horizontal slide menu for Vue JS 2+
3,328
| Install | |
|---|---|
npm install @jeremyhamm/vue-slider |
|
| Latest Version: | 0.2.0 |
| Vue: | 2 |
| License: | MIT |
| Last Updated: | Nov 20, 2019 |
| Links: | npm |
Maintainer: jeremyhamm
Vue Slider
A customizable horizontal slide menu for VueJs 2+

Installation
NPM
npm i @jeremyhamm/vue-slider
Browser
<script src="https://unpkg.com/@jeremyhamm/vue-slider"></script>
Useage
Mount with global
import Vue from 'vue'
import Slider from '@jeremyhamm/vue-slider'
Vue.use(Slider)
Mount with component
import Slider from '@jeremyhamm/vue-slider'
export default {
components: {
'slider': Slider
}
}
Use in component
<slider :width="300" format="push" direction="left" :opacity="0.15" :links="[{'id': 1, 'text': 'Link 1', 'url': 'https://github.com'}, {'id': 2, 'text': 'Link 2', 'url': 'https://github.com'}]"></slider>
Properties
| Name | Type | Default | Options |
|---|---|---|---|
| width | Number |
300 |
Menu Width (px) |
| format | String |
overlay |
push, full, overlay |
| direction | String |
left |
left, right |
| opacity | Number |
0 |
0.00 - 1.00 Representing css opacity |
| links | Array |
null | [{'id': 1, 'text': 'Link 1', 'url': 'https://github.com'}, {'id': 2, 'text': 'Link 2', 'url': 'https://github.com'}] |
Styles
All menu styles can be updated in /assets/sass/variables.scss
Related Packages
vue2-datetime-picker
vue2-datetime-picker is a vue2.0 compatible date time picker component. It is a...
1,011
1
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 0.2.0 | ^2.6.10 | MIT | |
| 0.1.16 | ^2.6.6 | MIT | |
| 0.1.15 | ^2.6.6 | MIT | |
| 0.1.14 | ^2.6.6 | MIT | |
| 0.1.13 | ^2.6.6 | MIT | |
| 0.1.12 | ^2.6.6 | MIT | |
| 0.1.11 | ^2.6.6 | MIT | |
| 0.1.10 | ^2.6.6 | MIT | |
| 0.1.9 | ^2.6.6 | MIT | |
| 0.1.8 | ^2.6.6 | MIT | |
| 0.1.7 | ^2.6.6 | MIT | |
| 0.1.6 | ^2.6.6 | MIT | |
| 0.1.5 | ^2.6.6 | MIT | |
| 0.1.4 | MIT | ||
| 0.1.3 | MIT | ||
| 0.1.2 | MIT |