Kanban

shadow

Komponent Kanban je element zobrazujúci plnoohodnotnú Kanban tabuľu. Tá umožňuje spravovať úlohy a projekty pomocou vizuálneho rozhrania.

Kanban tabuľa je rozdelená do stĺpcov, pričom každý stĺpec reprezentuje určitú fázu procesu alebo kategóriu úloh. Úlohy sú zobrazené ako karty, ktoré je možné presúvať medzi stĺpcami, čím je možné nastaviť a sledovať ich aktuálny stav.

Základné použitie

Ukážka predstavuje kanban v jeho základnej štruktúre, teda so stĺpcami a kartami bez ďalších rozšírení.

Kedy použiť

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

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

Metódy

setupDragAndDropEvents

Popis	Inicializuje obsluhu ťahania a púšťania na presúvanie kariet medzi stĺpcami.
Signatúra	() => void

setupSelectAllCardsEvent

Popis	Inicializuje obsluhu, ktorá vyberá alebo ruší výber všetkých kariet v stĺpci.
Signatúra	() => void

setupMenuItemClickEvents

Popis	Inicializuje obsluhu kliknutí pre akcie položiek kanban menu.
Signatúra	() => void

updateSelectedCards

Popis	Aktualizuje vybrané karty podľa najnovších údajov komponentu.
Signatúra	(pool: HTMLElement, isChecked: boolean) => void

movePool

Popis	Presunie stĺpec na novú pozíciu v dátach komponentu.
Signatúra	(pool: HTMLElement, direction: string) => void

renamePool

Popis	Premenuje stĺpec a obnoví závislé referencie.
Signatúra	(pool: HTMLElement) => void

getCardPlaceholder

Popis	Vráti kartu zástupný prvok z aktuálneho stavu komponentu.
Signatúra	() => null｜*

live

Popis	Zaregistruje delegované poslucháče udalostí pre dynamický obsah komponentu.
Signatúra	(eventType: string, selector: string, callback: function) => void

setSelectedCards

Popis	Nastaví vybrané karty a aplikuje súvisiace zmeny stavu.
Signatúra	(isChecked: boolean, card: HTMLElement) => void

setSelectedItems

Popis	Nastaví vybrané položky a aplikuje súvisiace zmeny stavu.
Signatúra	() => void

getPages

Popis	Vráti stránky z aktuálneho stavu komponentu.
Signatúra	(page: any) => Promise<any>

dispatchEvent

Popis	Vyvolá vlastnú udalosť z kontextu komponentu.
Signatúra	(event: any) => void

CSS tieňové časti

Názov	Popis
native-infinite-scroll	Štýluje shadow časť native-infinite-scroll.

CSS vlastné premenné

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

Sloty

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