Progress bar
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
Description | Adjusts the radius of the circular waveform indicator. |
Attribute | radius |
Type | number |
Default | 70 |
stroke
Description | Adjusts the thickness of the waveform indicator line. |
Attribute | stroke |
Type | number |
Default | 6 |
progress
Description | Sets the current progress status in percentage. |
Attribute | progress |
Type | number |
Default | undefined |
type
Description | Specifies the type of waveform indicator (default linear or 'circle' for circular). |
Attribute | type |
Type | string |
Default | undefined |
linecap
Description | Sets the line ending style (e.g. 'square', 'round'). |
Attribute | linecap |
Type | string |
Default | square |
color
Description | Sets the color scheme of the progress indicator (primary, complete, success, warning, danger, info). |
Attribute | color |
Type | string |
Default | undefined |
Eventy
No events available for this component.
Metódy
getCircleDasharray
Description | Returns the value for the dasharray of a circle with the given radius. |
Signature | getCircleDasharray(radius?: number) => number |
getCircleDashoffset
Description | Returns the value for the dashoffset of a circle with the given waveform and radius. |
Signature | getCircleDashoffset(progress?: number, radius?: number) => number |
setCircleProgress
Description | Sets the waveform value for the circular indicator. |
Signature | setCircleProgress(percent: number) => void |
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Vlastnosti
Name | Description |
---|---|
--wje-progress-bar-background-color | Sets the background color of the progress bar. |
--wje-progress-bar-color | Sets the colour of the progress bar. This property controls the color of the waveform indicator fill. |
--wje-progress-bar-text-size | Defines the font size of the text displayed inside the progress bar. |
--wje-progress-bar-text-color | Specifies the color of the text displayed inside the progress bar. |
Sloty
Name | Description |
---|---|
`` | Default progress bar slot. |
start | Slot at the beginning of the progress indicator. |
end | Slot at the end of the progress indicator. |