Skip to content

xiaoluoboding/vue-stroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

17 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

vue-stroll

Travis Build Status npm Download GitHub license GitHub stars

Vue.js Stroll.js. Awesome CSS list scroll effects for Vue2.x. See Demo

NPM

Installation

npm i vue-stroll -S

CDN

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

About

๐Ÿ“œ Vue.js Stroll.js. Awesome CSS list scroll effects for Vue2.x.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published