shadow
Komponent Level Indicator je element umožňujúci zobraziť úroveň alebo pokrok v procese. Môže byť použitý na zobrazenie úrovne nabitia batérie, pokroku používateľa alebo iných podobných úloh.
Pridaním atribútu colorize sa pruhy indikátora sfarbia podľa úrovne (nízka, stredná, vysoká).
Nastavením CSS premennej --wje-level-indicator-width na ľubovoľnú hodnotu je možné nastaviť šírku pruhov indikátora.
Pridaním atribútu reverse sa pruhy indikátora zobrazia v opačnom poradí.
| Description | Sets the current indicator level. The value is limited to a range from 0 to the number of bars. |
| Attribute | level |
| Type | number |
| Default | 1 |
| Description | Specifies the number of bars in the indicator. The minimum value is 1. |
| Attribute | swarms |
| Type | number |
| Default | 3 |
| Description | If set to true, the bars will be colored according to the level (low, medium, high). |
| Attribute | colorize |
| Type | boolean |
| Default | false |
| Description | If set to true, the order of the bars will be reversed. |
| Attribute | reverse |
| Type | boolean |
| Default | false |
No events available for this component.
| Description | Updates the class of each lane element based on the specified level. |
| Signature | (level: number, bars: any[]) => void |
| Description | Determines the color indicator based on a given level and number of bars. |
| Signature | (level: number, bars: number) => string ｜ undefined |
| Name | Description |
|---|
native | Refers to the main div container of the level indicator. |
| Name | Description |
|---|
--wje-level-indicator-color-low | Colour for low level indicator. |
--wje-level-indicator-color-medium | The colour for the middle level of the indicator. |
--wje-level-indicator-color-high | Colour for high level indicator. |
--wje-level-indicator-color | The basic colour of the indicator bars. |
--wje-level-indicator-color-active | The colour of the active indicator bars. |
--wje-level-indicator-height | Height of indicator bars. |
--wje-level-indicator-width | Indicator width. |
--wje-level-indicator-border-radius | Rounding the corners of the indicator bars. |
--wje-level-indicator-opacity | Transparency of inactive indicator bars. |
| Name | Description |
|---|
| `` | The default slot for the contents of the level indicator. |