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. |