File tree Expand file tree Collapse file tree 1 file changed +54
-1
lines changed
Expand file tree Collapse file tree 1 file changed +54
-1
lines changed Original file line number Diff line number Diff line change 11# svelte-virtual-scroll-list
22
3- ![ npm] ( https://img.shields.io/npm/v/svelte-virtual-scroll-list?style=for-the-badge )
3+ [ ![ npm] ( https://img.shields.io/npm/v/svelte-virtual-scroll-list?style=for-the-badge )] ( https://npmjs.com/package/svelte-virtual-scroll-list/ )
44
55Svelte implementation of vue library [ vue-virtual-scroll-list] ( https://github.com/tangbc/vue-virtual-scroll-list )
66
@@ -15,6 +15,59 @@ Online demo: [https://v1ack.github.io/svelte-virtual-scroll-list/](https://v1ack
1515
1616[ Simple example in Svelte REPL] ( https://ru.svelte.dev/repl/eae82aab17b04420885851d58de50a2e?version=3.38.2 )
1717
18+ # Getting started
19+
20+ ## Installing from npm
21+
22+ ` npm i svelte-virtual-scroll-list -D `
23+
24+ or
25+
26+ ` yarn add svelte-virtual-scroll-list -D `
27+
28+ ## Using
29+
30+ ``` html
31+
32+ <script >
33+ import VirtualScroll from " svelte-virtual-scroll-list"
34+
35+ let items = [{id: 1 , text: " one" }, ... ]
36+ </script >
37+ <div class =" vs" >
38+ <VirtualScroll
39+ data ={items}
40+ key =" id"
41+ let:data
42+ >
43+ <div slot =" header" >
44+ This is a header set via slot
45+ </div >
46+ <div >
47+ {data.text}
48+ </div >
49+ <div slot =" footer" >
50+ This is a footer set via slot
51+ </div >
52+ </VirtualScroll >
53+ </div >
54+ ```
55+
56+ More examples available in ` example ` folder
57+
58+ # Comparing to other virtualizing components
59+
60+ | | svelte-virtual-scroll-list| svelte-virtual-list| svelte-tiny-virtual-list|
61+ | ---| ---| ---| ---|
62+ | handle dynamic size data| +| +| -|
63+ | scroll methods (to index)| +| -| +|
64+ | infinity scrolling| two-directional| -| one-directional with another lib|
65+ | initial scroll position| +| -| +|
66+ | sticky items| -| -| +|
67+ | top/bottom slots| +| -| +|
68+ | reached top/bottom events| +| -| -|
69+ | document as a list| +| -| -|
70+
1871# API
1972
2073## Props
You can’t perform that action at this time.
0 commit comments