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
color
| Description | The color to use from your application's color palette. The default options are: "primary", "complete", "success", "warning", "warning", "light", and "dark". For more information, go to: theming. |
| Attribute | color |
| Type | "danger." ｜ "dark" ｜ "primary" ｜ "success" ｜ "light" ｜ "complete" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
linecap
| Description | Defines a waveform indicator with a rounded end. |
| Attribute | linecap |
| Type | boolean |
| Default | false |
progress
| Description | Specifies the value of the waveform in percentage. |
| Attribute | progress |
| Type | number |
| Default | 0 |
radius
| Description | Specifies the value of the waveform in percentage. |
| Attribute | radius |
| Type | number |
| Default | 70 |
stroke
| Description | Specifies the value of the waveform in percentage. |
| Attribute | stroke |
| Type | number |
| Default | 12 |
type
| Description | Add a type property with the value "circle" to display a progress bar with a circular design. |
| Attribute | type |
| Type | string |
| Default | undefined |
Eventy
No events available for this component.
Metódy
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Vlastnosti
| Name | Description |
|---|---|
--wj-progress-bar-color | Defines the colour of the progress bar |
--wj-progress-bar-text-size | Defines the size of the text |
Sloty
| Name | Description |
|---|---|
end | The content is placed on the right in the LTR and on the left in the RTL. |
start | The content is placed on the left in the LTR and on the right in the RTL. |