Infinite-scroll

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.

Počet načítaných položiek (size)

Atribút size definuje počet položiek pri každom načítaní nového obsahu.

Card

Element Infinite scroll je možné použiť v kombinácii s akýmkoľvek Elements elementom. Napríklad Card.

Vlastné dáta

Ukážka pripája infinite scroll na vlastný zdroj dát namiesto predpripraveného zoznamu, takže je bližšie reálnemu použitiu v aplikácii.

Kedy použiť

Použite wje-infinite-scroll, keď chcete riešiť daný UI problém konzistentne v rámci WebJET dizajn systému.

Kedy nepoužiť

Nepoužívajte komponent mimo jeho zodpovednosti; pri netypickom prípade radšej zložte viac menších prvkov.

Prístupnosť

Skontrolujte klávesnicové ovládanie, focus stavy, kontrast a zrozumiteľné pomenovanie interaktívnych prvkov.

Odporúčané postupy

• Preferujte API komponentu pred ručnými DOM zásahmi.
• Držte sa dizajnových tokenov a konzistentných konvencií pomenovania.
• Pred nasadením otestujte komponent v reálnych dátových scenároch.

Atribúty a vlastnosti

objectName

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

Udalosti

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 tieňové časti

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

CSS vlastné premenné

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.