You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+16-13
Original file line number
Diff line number
Diff line change
@@ -21,25 +21,26 @@
21
21
22
22
Keep your page efficient and fast: only shows the visible items, instead of displaying all your data in large lists.
23
23
24
-
This package is a copy-cat of [svelte-tiny-virtual-list](https://github.com/jonasgeiler/svelte-tiny-virtual-list)with svelte 5, better suroundings, types, bug fixes and enhacements to the functionality and APIs. Credits must go to its original [author](https://github.com/jonasgeiler).
24
+
This package originated from [svelte-tiny-virtual-list](https://github.com/jonasgeiler/svelte-tiny-virtual-list)and was modified to support Svelte 5, improved model handling, types, bug fixes, and overall project enhancement. Many thanks to the original [author](https://github.com/jonasgeiler).
25
25
26
26
## Features
27
27
28
-
-🔄**Svelte 5+**
28
+
-❺➎⓹**Svelte 5+ only**
29
29
Build for Svelte 5+ in Typescript.
30
30
31
-
-⚡**Performant**
31
+
-🚀**Performant**
32
32
Render millions of items, without breaking a sweat.
33
33
34
34
- 🛠 **Configurable**
35
35
Customize width, heigh, position, style, content.
36
-
- 💡 **Layout Control**
36
+
37
+
- 💠 **Layout Control**
37
38
Support fixed and variables sizing, dynamic loading along with vertical and horizontal lists.
38
39
39
-
-🧠**Programming Interface**
40
+
-🧩**Programming Interface**
40
41
Set list positions and properties, and respond promptly to events.
41
42
42
-
-🤏**Small**
43
+
-💼**Small**
43
44
Compact and dependency free – Only ~5kb when compressed.
44
45
45
46
## Usage
@@ -48,7 +49,7 @@ This component can be used two different ways:
48
49
49
50
- 🤖 As a scrollable listover a large number of items, optionally read incrementally.
50
51
51
-
-🧩 As a fondation for more complex components - TreeViews and DataGrids.
52
+
-🧠 As a fondation for more complex components - TreeViews and DataGrids.
52
53
53
54
## Browser Support
54
55
@@ -97,12 +98,13 @@ The component accepts the following properties
| width |`number` or `string`\*| ✓ | Width of List. This property will determine the number of rendered items when scrollDirection is `'horizontal'`. |
99
100
| height |`number` or `string`\*| ✓ | Height of List. This property will determine the number of rendered items when scrollDirection is `'vertical'`. |
100
-
| itemCount |`number`| ✓ | The number of items you want to render |
101
+
| items | any[]| ✓ | the model, the data for the items to display in the list. |
102
+
| itemCount |`number`| ✓ | The number of items you want to render. |
101
103
| itemSize | `number | number[]| (index: number) => number` | ✓ | Either a fixed height/width (depending on the scrollDirection), an array containing the heights of all the items in your list, or a function that returns the height of an item given its index: `(index: number): number`|
102
104
| row | (r:RowAttributes) => SnippetResult | ✓ | Snippet called to render every item, see description below. |
103
105
| scrollDirection |`string`|| Whether the list should scroll vertically or horizontally. One of `'vertical'` (default) or `'horizontal'`. |
104
-
| scrollOffset |`number`|| Can be used to control the scroll offset; Also useful for setting an initial scroll offset|
105
-
| scrollToIndex |`number`|| Item index to scroll to (by forcefully scrolling if necessary)|
106
+
| scrollOffset |`number`|| Can be used to control the scroll offset; Also useful for setting an initial scroll offset.|
107
+
| scrollToIndex |`number`|| Item index to scroll to (by forcefully scrolling if necessary).|
106
108
| scrollToAlignment |`string`|| Used in combination with `scrollToIndex`, this prop controls the alignment of the scrolled to item. One of: `'start'`, `'center'`, `'end'` or `'auto'`. Use `'start'` to always align items to the top of the container and `'end'` to align them bottom. Use `'center`' to align them in the middle of the container. `'auto'` scrolls the least amount possible to ensure that the specified `scrollToIndex` item is fully visible. |
107
109
| scrollToBehaviour |`string`|| Used in combination with `scrollToIndex`, this prop controls the behaviour of the scrolling. One of: `'auto'`, `'smooth'` or `'instant'` (default). |
108
110
| windowOverPadding |`number`|| Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices. |
@@ -115,10 +117,11 @@ _\* `height` must be a number when `scrollDirection` is `'vertical'`. Similarly,
115
117
116
118
-`header` - a snippet for the elements that should appear at the top of the list
117
119
-`footer` - a snippet for the elements that should appear at the bottom of the list (e.g. `InfiniteLoading` component from `svelte-infinite-loading`)
118
-
-`row` - a required snipper property called to render each row of the list with the signature `row(r:RowAttributes)`
120
+
-`slot` - a required snipper property called to render each row of the list with the signature `slot(r:RowAttributes)`
119
121
120
122
```typescript
121
123
exportinterfaceRowAttributes {
124
+
item:any// the element from the items array at index
122
125
index:number; // Item index
123
126
style:string; // Item style, must be applied to the slot (look above for example)
124
127
}
@@ -128,9 +131,9 @@ for instance,
128
131
129
132
```svelte
130
133
<VirtualList ...>
131
-
{#snippet row({ style, index }:RowAttributes)}
134
+
{#snippet slot({ item, style, index }:RowAttributes)}
0 commit comments