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 Fortschrittsbalkencycle: 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.
Links und Referenzen
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_label | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined | undefined |
_max (required) | _max | Defines at which value the progress display is completed. | number | undefined |
_type | _type | [DEPRECATED] will be removed in v2, use _variant Defines which variant should be used for presentation. | "bar" | "cycle" | "cycle-label-value" | "cycle-value-label" | undefined | undefined |
_unit | _unit | Defines the unit of the step values (not shown). | string | undefined | '%' |
_value (required) | _value | Defines the progress. | number | undefined |
_variant | _variant | Defines which variant should be used for presentation. | "bar" | "cycle" | "cycle-label-value" | "cycle-value-label" | undefined | undefined |