Skip to main content

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.

Atribúty a Vlastnosti

radius

DescriptionAdjusts the radius of the circular waveform indicator.
Attributeradius
Typenumber
Default70

stroke

DescriptionAdjusts the thickness of the waveform indicator line.
Attributestroke
Typenumber
Default6

progress

DescriptionSets the current progress status in percentage.
Attributeprogress
Typenumber
Defaultundefined

type

DescriptionSpecifies the type of waveform indicator (default linear or 'circle' for circular).
Attributetype
Typestring
Defaultundefined

linecap

DescriptionSets the line ending style (e.g. 'square', 'round').
Attributelinecap
Typestring
Defaultsquare

color

DescriptionSets the color scheme of the progress indicator (primary, complete, success, warning, danger, info).
Attributecolor
Typestring
Defaultundefined

Eventy

No events available for this component.

Metódy

getCircleDasharray

DescriptionReturns the value for the dasharray of a circle with the given radius.
SignaturegetCircleDasharray(radius?: number) => number

getCircleDashoffset

DescriptionReturns the value for the dashoffset of a circle with the given waveform and radius.
SignaturegetCircleDashoffset(progress?: number, radius?: number) => number

setCircleProgress

DescriptionSets the waveform value for the circular indicator.
SignaturesetCircleProgress(percent: number) => void

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Vlastnosti

NameDescription
--wje-progress-bar-background-colorSets the background color of the progress bar.
--wje-progress-bar-colorSets the colour of the progress bar. This property controls the color of the waveform indicator fill.
--wje-progress-bar-text-sizeDefines the font size of the text displayed inside the progress bar.
--wje-progress-bar-text-colorSpecifies the color of the text displayed inside the progress bar.

Sloty

NameDescription
``Default progress bar slot.
startSlot at the beginning of the progress indicator.
endSlot at the end of the progress indicator.