Skip to main content

Progress

Die Progress-Komponente erzeugt einen Fortschrittsbalken, über den eine optische Rückmeldung gegeben werden kann.

Konstruktion

Code

<div>
<kol-progress _label="Fortschritt" _variant="bar" _max="100" _value="20"></kol-progress>
<kol-progress _label="Fortschritt" _variant="cycle" _max="100" _value="20"></kol-progress>
</div>

Beispiel

Verwendung

Verwenden Sie das Attribut _variant, um die optische Ausgabe der Komponente zu steuern. Mögliche Werte sind:

  • bar: für eine Ausgabe als horizontaler Fortschrittsbalken
  • cycle: für eine Ausgabe als kreisförmiger Fortschrittsbalken

Verwenden Sie das Attribut _max, um den maximalen Wert der Komponente zu bestimmen, das Minimum ist immer 0.

Verwenden Sie das Attribut _value, um den aktuellen Wert der Komponente zu bestimmen.

Properties

PropertyAttributeDescriptionTypeDefault
_label_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).string | undefinedundefined
_max (required)_maxDefines at which value the progress display is completed.numberundefined
_unit_unitDefines the unit of the step values (not shown).string | undefined'%'
_value (required)_valueDefines the progress.numberundefined
_variant_variantDefines which variant should be used for presentation."bar" | "cycle" | "cycle-label-value" | "cycle-value-label" | undefinedundefined

Live-Editor

Beispiele