From 799d52b53c774e586e0907ff21fd5b16782d8e88 Mon Sep 17 00:00:00 2001 From: Paul Makles <paulmakles@gmail.com> Date: Sat, 15 Dec 2018 10:44:06 +0000 Subject: [PATCH] README.md --- README.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..fce7e76 --- /dev/null +++ b/README.md @@ -0,0 +1,48 @@ +## vue-dynamic-list + +> Simple fixed size dynamically loading lists in Vue.js + +This library allows you to create Google Contacts style dynamic lists, it is built upon Vue.js hence is easy to integrate into existing websites with or without Vue. + +### Demo +--- + + +### Usage +--- + +In your Vue.js application: +```html +<dynamic-list ref="myList"> + <template slot="entry" slot-scope="props"> + <div>{{props.entry}}</div> + </template> + <template slot="unloaded" slot-scope="props"> + <span>loading!</span> + </template> +</dynamic-list> +``` + +Using the library: +```js +const app = new Vue({ + el: '#app' +}); + +new vDynamicList(app, { + // reference to the <dynamic-list> + ref: 'myList', + // returns a promise which resolves with a section + onLoad: (i, l) => { + return new Promise((resolve, reject) => { + let y = []; + for (let j = 0; j < l; j++) y.push('hello!') + setTimeout(() => resolve(y), 400); + }); + }, + // you should load this first, and then create vDynamicList + elements: 1400, + // choose a suitable limit for each section + limit: 100 +}); +``` \ No newline at end of file -- GitLab