A customizable component designed to help with setting up infinite scrolling either on the window or a provided element.
| Prop Name | Default Value | Description |
|---|---|---|
data-manual-load |
false | Boolean indicating if the control of the items loading should be manual (button) or automatic (scroll) |
data-load-callback |
- | Required Function to call to load more items (needs to return a promise) |
data-content-finished |
- | Required Booolean that signals the component when there are no more new items to load |
data-root |
null | The Element or Document whose bounds are used as the bounding box when testing for intersection. |
data-root-margin |
'0px 0px 0px 0px' | A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections. |
data-threshold |
0.10000000149011612 | Either a single number or an array of numbers between 0.0 and 1. |
| Name | Description |
|---|---|
default |
Slot that recieves the elements that should be wrapped by the infinite scroll component |
manual-loader |
Slot for clickable element to fire up manual load (es: buttons), needs slot prop load the function to load items |
error |
Slot for the html to show if an error occurs |
loading |
Slot for the animation/spinner to show during loading |
content-finished |
Slot for the to show if there aren't more content |
| Event | Payload Type | Description |
|---|---|---|
| 'loaded' | Array | Emits the value returned from the async function in dataLoader |