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

Commit 1a9ae9a

Browse files
carwackcarwack
committed
fix(docs): fix typo in link
1 parent f00375b commit 1a9ae9a

File tree

1 file changed

+25
-28
lines changed

1 file changed

+25
-28
lines changed

‎website/pages/circularprogress.mdx

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,41 @@
1-
import SEO from "../components/SEO";
2-
3-
<SEO title="Circular Progress" description="Circular Progress is used to indicates the progress for determinate and indeterminate processes." />
4-
5-
1+
import SEO from '../components/SEO'
62

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

2221
## Import
2322

2423
```js
25-
import { CCircularProgress, CCircularProgressLabel } from "@chakra-ui/vue";
24+
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.
3936

4037
```vue live=true
41-
// Change the size to 120px
42-
<c-circular-progress :value="30" size="120px" />
38+
// Change the size to 120px <c-circular-progress :value="30" size="120px" />
4339
```
4440

4541
### Changing the thickness
@@ -79,7 +75,7 @@ Setting the progress to indeterminate means you're not able to determine the
7975
`value` upfront, so won't need to pass the `value` prop.
8076

8177
```vue live=true
82-
<c-circular-progress is-indeterminate/>
78+
<c-circular-progress is-indeterminate />
8379
```
8480

8581
### Accessibility
@@ -90,19 +86,20 @@ Setting the progress to indeterminate means you're not able to determine the
9086

9187
## Props
9288

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

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

0 commit comments

Comments
 (0)