UNPKG

@public-ui/components

Version:

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

public-ui.github.io

public-ui/kolibri

60 lines (35 loc) • 2.94 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
# Progress Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine optische Rückmeldung gegeben werden kann. ## Konstruktion ### Code ```html <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 <kol-progress _label="Fortschritt" _variant="bar" _max="100" _value="20"></kol-progress> <kol-progress _label="Fortschritt" _variant="cycle" _max="100" _value="20"></kol-progress> ## 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. <!--### Best practices ### Anwendungsfälle--> <!-- ## Barrierefreiheit --> ## Links und Referenzen - <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/progress" _target="_blank"></kol-link> - <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" _target="_blank"></kol-link> <!-- Auto Generated Below --> ## 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` | | `_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"` \| `undefined` | `undefined` | ----------------------------------------------