13

Github GitHub - xiaoluoboding/vue-stroll: ? Vue.js + Stroll.js. Awesome CSS list...

 4 years ago
source link: https://github.com/xiaoluoboding/vue-stroll
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

vue-stroll

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

Installation

npm i vue-stroll -S

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK