shadow
Infinite Scroll allows you to implement dynamic data loading as users scroll through more content. The element allows you to view any content from a selected endpoint without requiring further interaction, such as clicking the "Load more" button or a link to the next page. The component also displays a loader indicator to inform users when new content is being loaded.
The size attribute defines the number of items each time new content is loaded.
The Infinite scroll element can be used in combination with any Elements element. For example Card.
totalPages
| Description | Total number of pages available for infinite scrolling. |
| Attribute | total-pages |
| Type | number |
| Default | undefined |
| Description | A field tracking the loading status. |
| Attribute | is-loading |
| Type | any[] |
| Default | undefined |
| Description | Template for infinite scroll content. |
| Attribute | infinite-scroll-template |
| Type | null |
| Default | undefined |
| Description | Data answers for infinite scrolling. |
| Attribute | response |
| Type | any ｜ {} |
| Default | undefined |
| Description | The name of the object to be used in infinite scrolling. |
| Attribute | object-name |
| Type | string |
| Default | undefined |
No events available for this component.
getPages
| Description | Retrieves pages from the server. |
| Signature | getPages(page: number) => Promise<object> |
| Description | Hides the loading indicator. |
| Signature | hideLoader() => void |
| Description | Displays the loader element by adding the 'show' class to its class list. This method is useful for indicating the loading or processing status in the user interface. |
| Signature | showLoader() => void |
hasMorePages
| Description | Checks if there are other pages to load. |
| Signature | hasMorePages(page: number) => boolean |
loadPages
| Description | Loads pages. |
| Signature | loadPages(page: number) => Promise<void> |
| Description | Adds an item to the infinite scroll. |
| Signature | addItem(item: any, place?: string) => void |
| Description | Removes the item from infinite scrolling. |
| Signature | removeItem(item: any) => void |
| Name | Description |
|---|
native-infinite-scroll | Refers to the container of the content element. |
| Name | Description |
|---|
--wje-infinite-scroll-width | Adjusts the width of the infinite scroll container. This property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percent (%), pixels (px), or display units (vw). The default value is 100%, which means it takes up the entire width of its container. |
--wje-infinite-scroll-height | Defines the height of the infinite scroll container. This property determines how high the infinite scroll area should be. It accepts any valid CSS height value, such as pixels (px), percentages (%), or display units (vh). The default is 300px, which provides a fixed height suitable for most use cases. |
| Name | Description |
|---|
| `` | Default slot for Infinite scroll. |
ending | The content is placed behind the Infinite scroll. |
loader | Displays the loading icon when scrolling. |