Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit b4dccdb

Browse files
Merge pull request #536 from carwack/b/535-docs-accessibility-link-report-circularprocess-typo
fix(docs): fix typo in link
2 parents 249b78c + 66da32c commit b4dccdb

File tree

1 file changed

+22
-24
lines changed

1 file changed

+22
-24
lines changed

website/pages/circularprogress.mdx

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
import SEO from "../components/SEO";
22

3-
<SEO title="Circular Progress" description="Circular Progress is used to indicates the progress for determinate and indeterminate processes." />
4-
5-
6-
3+
<SEO
4+
title="Circular Progress"
5+
description="Circular Progress is used to indicates the progress for determinate and indeterminate processes."
6+
/>
77

88
# Circular Progress
9+
910
The Circular Progress component is used to indicates the progress for both determinate and indeterminate processes.
1011

1112
- Determinate progress fills the circular track with color, as the indicator
1213
moves from 0 to 360 degrees.
1314
- Indeterminate progress grows and shrinks the indicator while moving along the
1415
circular track.
1516

16-
17-
See `CCircularProgress`'s <a target="_blank" href="https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CCircularProgress/accesibility.md">accessibility report</a>
18-
17+
See `CCircularProgress`'s <a target="_blank" href="https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CCircularProgress/accessibility.md">accessibility report</a>
1918

2019
<carbon-ad />
2120

@@ -25,14 +24,12 @@ See `CCircularProgress`'s <a target="_blank" href="https://github.com/chakra-ui/
2524
import { CCircularProgress, CCircularProgressLabel } from "@chakra-ui/vue";
2625
```
2726

28-
2927
## Usage
3028

3129
```vue live=true
3230
<c-circular-progress :value="80" />
3331
```
3432

35-
3633
### Changing the size
3734

3835
You can add `size` prop to the progress bar to add a custom size.
@@ -79,7 +76,7 @@ Setting the progress to indeterminate means you're not able to determine the
7976
`value` upfront, so won't need to pass the `value` prop.
8077

8178
```vue live=true
82-
<c-circular-progress is-indeterminate/>
79+
<c-circular-progress is-indeterminate />
8380
```
8481

8582
### Accessibility
@@ -90,19 +87,20 @@ Setting the progress to indeterminate means you're not able to determine the
9087

9188
## Props
9289

93-
| Name | Type | Default | Description |
94-
| --------------- | ----------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
95-
| size | `string` | `48px` | The size of the circular progress in CSS units |
96-
| max | `number` | `100` | Maximum value defining 100% progress made (must be higher than 'min') |
97-
| min | `number` | `0` | Minimum value defining 'no progress' (must be lower than 'max') |
98-
| value | `number` | | Current progress (must be between min/max) |
99-
| isIndeterminate | `boolean` | | Puts the component into 'indeterminate' state; Ignores 'value' prop |
100-
| thickness | `number` | `0.2` | The thickness of progress indicator as a ratio of `size`. Must be between `0` and `1` |
101-
| angle | `number` | `0` | Angle to rotate progress indicator by |
102-
| trackColor | `string` | `gray` | The color name of the progress track. Use a color key in the theme object |
103-
| color | `string` | `blue` | The color of the progress indicator. Use a color key in the theme object |
90+
| Name | Type | Default | Description |
91+
| --------------- | --------- | ------- | ------------------------------------------------------------------------------------- |
92+
| size | `string` | `48px` | The size of the circular progress in CSS units |
93+
| max | `number` | `100` | Maximum value defining 100% progress made (must be higher than 'min') |
94+
| min | `number` | `0` | Minimum value defining 'no progress' (must be lower than 'max') |
95+
| value | `number` | | Current progress (must be between min/max) |
96+
| isIndeterminate | `boolean` | | Puts the component into 'indeterminate' state; Ignores 'value' prop |
97+
| thickness | `number` | `0.2` | The thickness of progress indicator as a ratio of `size`. Must be between `0` and `1` |
98+
| angle | `number` | `0` | Angle to rotate progress indicator by |
99+
| trackColor | `string` | `gray` | The color name of the progress track. Use a color key in the theme object |
100+
| color | `string` | `blue` | The color of the progress indicator. Use a color key in the theme object |
104101

105102
## Slots
106-
| Name | Description |
107-
| ---------- | --------------------------------------------------------------------------------- |
108-
| default | Used for the `CCircularProgressLabel` to display the current progress percentage |
103+
104+
| Name | Description |
105+
| ------- | -------------------------------------------------------------------------------- |
106+
| default | Used for the `CCircularProgressLabel` to display the current progress percentage |

0 commit comments

Comments
 (0)