Skip to main content

Level Indicator

shadow

The Level Indicator component is an element that allows you to view the level or progress of a process. It can be used to display battery level, user progress or other similar tasks.

Basic use​

The demo shows the level indicator in its simplest form, so it is easy to see the default distribution of levels and their reading.

Colorize​

By adding the colorize attribute, the indicator bars are colored according to the level (low, medium, high).

Sulphur indicator bars​

By setting the CSS variable --wje-level-indicator-width to any value, the width of the indicator bars can be set.

Reverse​

Adding the reverse attribute will display the indicator bars in reverse order.

When to use​

Use wje-level-indicator when you need to immediately communicate the status, result of an action, or next step to the user.

When not to use​

Don't use multiple competing feedback channels at the same time for one event.

Accessibility​

Communicate message status through appropriate ARIA live regions and manage focus (open/close) for modal elements.

  • Select the severity of the messages (info/success/warning/error) according to the real impact on the user.
  • For blocking actions, prefer confirmation only where irreversible change is imminent.
  • Set consistent timeouts so the user has time to read the message.

Attributes and properties​

bars​

PopisNastavuje textovú hodnotu uloženú vo voľbe bars.
Atribútbars
Typstring
Predvolené-

colorize​

PopisUrčuje, či je voľba colorize zapnutá a ovplyvňuje správanie komponentu.
Atribútcolorize
Typboolean
Predvolenéfalse

level​

PopisNastavuje úroveň korekcie chýb.
Atribútlevel
Typstring
Predvolené-

reverse​

PopisUrčuje, či je voľba reverse zapnutá a ovplyvňuje správanie komponentu.
Atribútreverse
Typboolean
Predvolenéfalse

Events​

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods​

updateBars​

PopisAktualizuje bars podľa najnovších údajov komponentu.
Signatúra(level: number, bars: Array) => void

getColor​

PopisVráti color z aktuálneho stavu komponentu.
Signatúra(level: number, bars: number) => string ｜ undefined

CSS shadow parts​

NázovPopis
``Štýluje shadow časť časť.

CSS custom variables​

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Slots​

Pre tento komponent nie sú dostupné žiadne sloty.

Content