shadow
Infinite Scroll umožňuje implementovať dynamické načítavanie dát, keď používatelia prechádzajú väčším množstvom obsahu. Element umožňuje zobraziť akýkoľvek obsah zo zvoleného koncového bodu (endpointu) bez toho, aby bola potrebná ďalšia interakcia, napríklad kliknutie na tlačidlo “Načítať viac” alebo na odkaz na ďalšiu stránku. Komponent zároveň zobrazuje indikátor načítania (loader), aby informoval používateľov o načítavaní nového obsahu.
Atribút size definuje počet položiek pri každom načítaní nového obsahu.
Element Infinite scroll je možné použiť v kombinácii s akýmkoľvek Elements elementom. Napríklad 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. |