Reorder

Reorder je komponent, ktorý umožňuje pomocou funkcionality Drag&Drop, zmeniť poradie položky ReorderItem v skupine.

Základné použitie

Ukážka predstavuje základné presúvanie položiek v jednom zozname bez ďalších obmedzení alebo drop zón.

Atribút Disabled

Atribút disabled sa používa na zakázanie možnosti preusporiadania položiek v rámci Reorder. Keď je tento atribút nastavený, používateľ nebude môcť ťahať položky na zmenu ich poradia.

Rukoväť pre ťahanie

Pridaním elementu do slotu handle položky ReorderItem, môžete definovať špecifickú oblasť, ktorá bude slúžiť ako rukoväť pre ťahanie a preusporiadanie položiek. Toto umožňuje používateľom intuitívnejšie interakcie pri zmene poradia položiek.

Atribút Reverse - Opačné poradie

Atribút reverse sa používa na zmenu smeru preusporiadania položiek v rámci Reorder.

Drop Zóny

DropZone je komponent, ktorý predstavuje zónu určenú pre preusporiadanie obsahu.

Kedy použiť

Použite wje-reorder, 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

Pre tento komponent nie sú dostupné žiadne vlastnosti.

Udalosti

Názov	Popis
wje-reorder:change	Vyvolá sa pri zmene hodnoty komponentu.

Metódy

attachEventListeners

Popis	Spustí metódu attachEventListeners na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(element: any) => void

mouseDown

Popis	Spustí metódu mouseDown na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(e: object) => void

touchStart

Popis	Spustí metódu touchStart na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(e: any) => void

startDragging

Popis	Spustí metódu startDragging na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(clientX: number, clientY: number, target: HTMLElement) => void

mouseMove

Popis	Spustí metódu mouseMove na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(e: any) => void

touchMove

Popis	Spustí metódu touchMove na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(e: TouchEvent) => void

moveElement

Popis	Presunie element na novú pozíciu v dátach komponentu.
Signatúra	(pageX: number, pageY: number) => void

mouseUp

Popis	Spustí metódu mouseUp na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

touchEnd

Popis	Spustí metódu touchEnd na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

stopDragging

Popis	Spustí metódu stopDragging na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

dragStart

Popis	Spustí metódu dragStart na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(e: DragEvent) => void

createClone

Popis	Vytvorí clone a pripojí ho do štruktúry komponentu.
Signatúra	() => void

isMovingDown

Popis	Overí, či je moving down aktuálne pravda.
Signatúra	(droppedElement: any) => boolean

dispatchChange

Popis	Vyvolá vlastnú udalosť z kontextu komponentu.
Signatúra	(from: number, to: number, order: Array<number>, orderElements: any) => void

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS vlastné premenné

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Sloty

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