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
+13-19Lines changed: 13 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -99,15 +99,15 @@ The component accepts the following properties
99
99
| width |`number` or `string`\*| ✓ | Width of List. This property will determine the number of rendered items when scrollDirection is `'horizontal'`. |
100
100
| height |`number` or `string`\*| ✓ | Height of List. This property will determine the number of rendered items when scrollDirection is `'vertical'`. |
101
101
| model | any[]| ✓ | the model, the data for the items to display in the list. |
102
-
| modelCount |`number`| ✓ | The number of items you want to render. |
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
+
| modelCount |`number`| ✓ | The number of items you want to render. |
103
+
|sizeCalculator|`(index: number, item:any) => number or SizingCalculatorFn`| ✓ |A function that returns the size (height or width) of the row/column being rendered. the output of this function is used for scrollbar positioning and is passed to the `vl_slot`|
104
104
| row | (r:RowAttributes) => SnippetResult | ✓ | Snippet called to render every item, see description below. |
105
105
| scrollDirection |`string`|| Whether the list should scroll vertically or horizontally. One of `'vertical'` (default) or `'horizontal'`. |
106
-
|scrollOffset|`number`|| Can be used to control the scroll offset; Also useful for setting an initial scroll offset. |
106
+
|scrollToOffset|`number`|| Can be used to control the scroll offset; Also useful for setting an initial scroll offset. |
107
107
| scrollToIndex |`number`|| Item index to scroll to (by forcefully scrolling if necessary). |
108
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. |
109
109
| scrollToBehaviour |`string`|| Used in combination with `scrollToIndex`, this prop controls the behaviour of the scrolling. One of: `'auto'`, `'smooth'` or `'instant'` (default). |
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. |
110
+
| windowOverPadding |`number`|| Number of extra items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers and devices. |
111
111
| estimatedItemSize |`number`|| Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered. |
112
112
| getKey |`(index: number) => any`|| Function that returns the key of an item in the list, which is used to uniquely identify an item. This is useful for dynamic data coming from a database or similar. By default, it's using the item's index. |
113
113
@@ -116,28 +116,22 @@ _\** `model` is stored, `items` are rendered
116
116
117
117
### Snippets
118
118
119
-
-`header` - a snippet for the elements that should appear at the top of the list
120
-
-`footer` - a snippet for the elements that should appear at the bottom of the list
121
-
-`slot` - a required snipper property called to render each row of the list with the signature `slot(r:RowAttributes<T>)`
119
+
-`header` - an optional snippet for the elements that should appear at the top of the list, typically used in table mode
120
+
-`footer` - an optional snippet for the elements that should appear at the bottom of the list, typically used in table mode
121
+
-`vl_slot` - a required snipper property called to render each row of the list with the signature `vl_slot({index, item, size?})`. `size` is only present if a custom **sizeCalculator** is in place.
122
+
122
123
123
-
```typescript
124
-
exportinterfaceRowAttributes<T> {
125
-
item:T// the element from the model array to be rendered
126
-
index:number; // Item index
127
-
style:string; // Item style, must be applied to the slot (look above for example)
128
-
}
129
-
```
130
124
131
125
for instance,
132
126
133
127
```svelte
134
-
<VirtualList ...>
135
-
{#snippet slot({ item, style, index }:RowAttributes)}
Copy file name to clipboardExpand all lines: TODO.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
[x] Add class and style attributes - implemeted via {...attributes}
3
3
[x] store the model inside the component
4
4
[x] Rename the row snippet to something else -> slot
5
-
[] add disabled
6
-
[] move the css style logic out of the component row({ item, style, index })
5
+
[x] add disabled
6
+
[x] move the css style logic out of the component row({ item, style, index })
7
7
[x] considering, items={data} itemCount={data.length} itemSize={50}; model is data, items is the view should be transformed into model={data} modelCount={data.length} itemSize={50}, {@render item(...)}
0 commit comments