Skip to content

Commit 9e71a93

Browse files
committed
Update readme
1 parent 0647719 commit 9e71a93

File tree

1 file changed

+54
-1
lines changed

1 file changed

+54
-1
lines changed

README.md

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
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

55
Svelte 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

0 commit comments

Comments
 (0)