vue-stroll
Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. See Demo
Installation
npm i vue-stroll -SCDN
Use this URL for development
https://rawgit.com/xiaoluoboding/vue-stroll/master/dist/vue-stroll.min.js
Use this URL in production
https://cdn.rawgit.com/xiaoluoboding/vue-stroll/master/dist/vue-stroll.min.js
Import
ES6
import VueStroll from 'vue-stroll'CommonJS
var VueStroll = require('vue-stroll');script
<script type="text/javascript" src="vue/dist/vue.min.js"></script>
<script type="text/javascript" src="vue-stroll/dist/vue-stroll.min.js"></script>
<script type="text/javascript">
var VueStroll = window['vue-stroll'];
</script>Usage
script
new Vue({
el: 'body',
data: {
el: '#app ul',
effect: 'cards',
collection: [
'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten'
]
},
components: { VueStroll }
});html
<!-- Dynamic props -->
<vue-stroll :el="el" :collection="collection" :effect="effect"></vue-stroll>Props
| Name | Type | Desc | Example |
|---|---|---|---|
| el | String | The element you will bind | "#app ul" |
| collection | Array | The list you will render | ['One', 'Two', 'Three', 'Four', 'Five'] |
| effect | String | The awesome effects style | wave See Demo |
License
MIT