Infinite-scroll

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.

Number of items loaded (size)

The size attribute defines the number of items each time new content is loaded.

Card

The Infinite scroll element can be used in combination with any Elements element. For example Card.

Custom data

The sample connects the infinite scroll to a custom data source instead of a predefined list, so it's closer to real-world use in an application.

When to use

Use wje-infinite-scroll when you want to solve a given UI problem consistently within the WebJET design system.

When not to use

Do not use a component outside of its responsibility; in an unusual case, prefer to assemble multiple smaller components.

Accessibility

Check keyboard controls, focus states, contrast and clear naming of interactive elements.

Recommended practices

• Prefer API component over manual DOM interventions.
• Stick to design tokens and consistent naming conventions.
• Before deployment, test the component in real data scenarios.

Attributes and properties

objectName

Popis	Riadi správanie voľby object-name v komponente.
Atribút	object-name
Typ	any
Predvolené	data

Events

Názov	Popis
wje-infinite-scroll:click-item	Vyvolá sa pri odoslaní udalosti wje-infinite-scroll:click-item.
wje-infinite-scroll:start	Vyvolá sa pri odoslaní udalosti wje-infinite-scroll:start.
wje-infinite-scroll:load	Vyvolá sa po dokončení asynchrónneho načítania obsahu.
wje-infinite-scroll:finish	Vyvolá sa pri odoslaní udalosti wje-infinite-scroll:finish.
wje-infinite-scroll:complete	Vyvolá sa pri odoslaní udalosti wje-infinite-scroll:complete.

Metódy

loadPages

Popis	Načíta stránky z dostupných zdrojov komponentu.
Signatúra	(page: number) => void

addItem

Popis	Pridá položku do spravovanej kolekcie komponentu.
Signatúra	(item: any, place: any) => void

removeItem

Popis	Odstráni položku z aktuálneho stavu komponentu.
Signatúra	(item: any) => void

reset

Popis	Obnoví stav komponentu na počiatočné hodnoty.
Signatúra	() => void

CSS shadow parts

Názov	Popis
loader	Štýluje shadow časť loader.

CSS custom variables

Názov	Popis
--wje-infinite-scroll-width	Vlastná CSS premenná, ktorá riadi width.
--wje-infinite-scroll-height	Vlastná CSS premenná, ktorá riadi height.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.