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 _type, 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_labelSetzt die Bezeichnung der Fortschrittsanzeige.string | undefinedundefined
_max (required)_maxGibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.numberundefined
_type_type[DEPRECATED] will be removed in v2, use _variant

Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.
"bar" | "cycle" | undefinedundefined
_unit_unitSetzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)string | undefined'%'
_value (required)_valueGibt an, wie weit die Anzeige fortgeschritten ist.numberundefined
_variant_variantGibt an, ob die Fortschrittsanzeige als Balken oder Kreis dargestellt wird."bar" | "cycle" | undefinedundefined

Live-Editor

Beispiele