You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: apps/website/src/routes/docs/headless/progress/index.mdx
+28-29Lines changed: 28 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,9 @@ Displays a progress bar related to a task.
14
14
15
15
<Showcasename="hero" />
16
16
17
-
Qwik UI's Progress implementation follows the [WAI-Aria](https://www.w3.org/WAI/ARIA/apg/patterns/meter) design pattern, along with some additional API's that enhance the flexibility, types, and performance.
17
+
Qwik UI's Progress implementation follows the [WAI-Aria](https://w3c.github.io/aria/#progressbar) design pattern, along with some additional API's that enhance the flexibility, types, and performance.
18
+
19
+
## ✨ Features
18
20
19
21
<FeatureList
20
22
features={['Provides context for assistive technology to read the progress of a task.']}
{/* TODO: Match docs conventions with the select, collapsible, or label. */}
29
+
### 🎨 Anatomy
30
+
31
+
<AnatomyTable
32
+
propDescriptors={[
33
+
{
34
+
name: 'Progress.Root',
35
+
description: 'The root container for the progress',
36
+
},
37
+
{
38
+
name: 'Progress.Indicator',
39
+
description: 'Displays the progression process',
40
+
},
41
+
]}
42
+
/>
43
+
44
+
## Example CSS
45
+
46
+
<CodeSnippetname="progress.css" />
28
47
29
48
## Accessibility
30
49
31
-
Adheres to the [progressbar role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/meter/).
50
+
Adheres to the [progressbar role requirements](https://w3c.github.io/aria/#progressbar/).
32
51
33
52
## API
34
53
35
-
### Progress
36
-
37
-
Contains all of the progress parts.
54
+
### Progress.Root
38
55
39
56
<APITable
40
57
propDescriptors={[
41
58
{
42
59
name: 'class',
43
60
type: 'string',
44
-
description: 'CSS classes to apply to the Progress.',
61
+
description: 'Custom class for the progress wrapper',
45
62
},
46
63
{
47
64
name: 'value',
48
65
type: 'number',
49
-
description: 'The progress value.',
66
+
description: 'Current value of the progress bar.',
50
67
},
51
68
{
52
69
name: 'max',
53
70
type: 'number',
54
-
description: 'The maximum progress value',
71
+
description: 'Maximum value of the progress bar.',
55
72
},
56
73
{
57
74
name: 'getValueLabel',
@@ -62,32 +79,14 @@ Contains all of the progress parts.
62
79
]}
63
80
/>
64
81
65
-
### Progress Indicator
66
-
67
-
Contains all of the progress parts.
82
+
### Progress.Indicator
68
83
69
84
<APITable
70
85
propDescriptors={[
71
86
{
72
87
name: 'class',
73
88
type: 'string',
74
-
description: 'CSS classes to apply to the Progress.',
75
-
},
76
-
{
77
-
name: 'value',
78
-
type: 'number',
79
-
description: 'The progress value.',
80
-
},
81
-
{
82
-
name: 'max',
83
-
type: 'number',
84
-
description: 'The maximum progress value',
85
-
},
86
-
{
87
-
name: 'getValueLabel',
88
-
type: 'function',
89
-
description:
90
-
'A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.',
89
+
description: 'Custom class for the progress indicator',
0 commit comments