Progress bar

shadow

Progress Bar element je komponent navrhnutý na vizualizáciu priebehu. Ponúka možnosť vytvárať prispôsobiteľné kruhové alebo rovné ukazovatele s rôznymi možnosťami konfigurácie.

Základné použitie

Pre použitie komponentu Progress Bar, ho zahrňte do HTML s požadovanými atribútmi. Atribút progress nastaví percentuálnu hodnotu priebehu v progress bare.

Type

Podporované sú dva typy progress barov. Pridaním vlastnosti type s hodnotou “circle” zobrazíte progress bar s okrúhlym dizajnom.

Label

Pre zobrazenie popisiek pri progress bare je potrebné vložiť do jeho vnútra Label element a definovať mu pozíciu pridaním atribútu slot s hodnotou "start" alebo "end".

Linecap

Pridaním vlastnosti linecap s hodnotou “round” zobrazíte ukazovateľ priebehu so zaobleným koncom.

Radius

Atribút radius určí priemer okrúhleho progress baru.

Stroke

Atribút stroke definuje šírku progress baru v pixeloch.

Progress bar s obrázkom

Pre zobrazenie obrázku vo vnútri elementu, je potrebné obrázok zaobaliť do progress bar elementu.

Farebné varianty progress baru

Vlastnosť color upravuje farbu elementu. V predvolenom nastavení má element farbu dark. Nastavením tejto hodnoty sa farba elementu zmení na jednu z farieb prednastavenej farebnej palety.

Kedy použiť

Použite wje-progress-bar, keď potrebujete používateľovi okamžite komunikovať stav, výsledok akcie alebo ďalší krok.

Kedy nepoužiť

Nepoužívajte viacero konkurenčných feedback kanálov naraz pre jednu udalosť.

Prístupnosť

Status správy oznamujte cez vhodné ARIA live regióny a pri modálnych prvkoch spravujte fokus (open/close).

Odporúčané postupy

• Vyberte závažnosť správ (info/success/warning/error) podľa reálneho dopadu na používateľa.
• Pri blokujúcich akciách preferujte potvrdenie iba tam, kde hrozí nevratná zmena.
• Nastavte konzistentné timeouty, aby používateľ stihol správu prečítať.

Atribúty a vlastnosti

progress

Popis	Nastavuje hodnotu progresu zobrazenú v indikátore.
Atribút	progress
Typ	any
Predvolené	-

Udalosti

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

Metódy

getCircleDasharray

Popis	Vráti circle dasharray z aktuálneho stavu komponentu.
Signatúra	(radius: number) => number

getCircleDashoffset

Popis	Vráti circle dashoffset z aktuálneho stavu komponentu.
Signatúra	(progress: number, radius: number) => number

setCircleProgress

Popis	Nastaví circle progress a aplikuje súvisiace zmeny stavu.
Signatúra	(percent: any) => void

CSS tieňové časti

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS vlastné premenné

Názov	Popis
--wje-progress-bar-color	Vlastná CSS premenná, ktorá riadi color.
--wje-progress-bar-text-size	Vlastná CSS premenná na štýlovanie komponentu (text size).
--wje-progress-bar-text-color	Vlastná CSS premenná, ktorá riadi text color.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.
start	Slot pre obsah zobrazený pred hlavným obsahom.
end	Slot pre obsah zobrazený za hlavným obsahom.