From 1a9ae9a01a79cedc9bb45ee71cd57a0623029ec7 Mon Sep 17 00:00:00 2001 From: carwack Date: Mon, 30 May 2022 09:08:44 +0200 Subject: [PATCH 1/2] fix(docs): fix typo in link --- website/pages/circularprogress.mdx | 53 ++++++++++++++---------------- 1 file changed, 25 insertions(+), 28 deletions(-) diff --git a/website/pages/circularprogress.mdx b/website/pages/circularprogress.mdx index bb291a03..e68e9dfc 100644 --- a/website/pages/circularprogress.mdx +++ b/website/pages/circularprogress.mdx @@ -1,11 +1,12 @@ -import SEO from "../components/SEO"; - - - - +import SEO from '../components/SEO' + # Circular Progress + The Circular Progress component is used to indicates the progress for both determinate and indeterminate processes. - Determinate progress fills the circular track with color, as the indicator @@ -13,33 +14,28 @@ The Circular Progress component is used to indicates the progress for both deter - Indeterminate progress grows and shrinks the indicator while moving along the circular track. - -See `CCircularProgress`'s accessibility report - +See `CCircularProgress`'s accessibility report ## Import ```js -import { CCircularProgress, CCircularProgressLabel } from "@chakra-ui/vue"; +import { CCircularProgress, CCircularProgressLabel } from '@chakra-ui/vue' ``` - ## Usage ```vue live=true ``` - ### Changing the size You can add `size` prop to the progress bar to add a custom size. ```vue live=true -// Change the size to 120px - +// Change the size to 120px ``` ### Changing the thickness @@ -79,7 +75,7 @@ Setting the progress to indeterminate means you're not able to determine the `value` upfront, so won't need to pass the `value` prop. ```vue live=true - + ``` ### Accessibility @@ -90,19 +86,20 @@ Setting the progress to indeterminate means you're not able to determine the ## Props -| Name | Type | Default | Description | -| --------------- | ----------------- | ------- | ---------------------------------------------------------------------------------------------------------------- | -| size | `string` | `48px` | The size of the circular progress in CSS units | -| max | `number` | `100` | Maximum value defining 100% progress made (must be higher than 'min') | -| min | `number` | `0` | Minimum value defining 'no progress' (must be lower than 'max') | -| value | `number` | | Current progress (must be between min/max) | -| isIndeterminate | `boolean` | | Puts the component into 'indeterminate' state; Ignores 'value' prop | -| thickness | `number` | `0.2` | The thickness of progress indicator as a ratio of `size`. Must be between `0` and `1` | -| angle | `number` | `0` | Angle to rotate progress indicator by | -| trackColor | `string` | `gray` | The color name of the progress track. Use a color key in the theme object | -| color | `string` | `blue` | The color of the progress indicator. Use a color key in the theme object | +| Name | Type | Default | Description | +| --------------- | --------- | ------- | ------------------------------------------------------------------------------------- | +| size | `string` | `48px` | The size of the circular progress in CSS units | +| max | `number` | `100` | Maximum value defining 100% progress made (must be higher than 'min') | +| min | `number` | `0` | Minimum value defining 'no progress' (must be lower than 'max') | +| value | `number` | | Current progress (must be between min/max) | +| isIndeterminate | `boolean` | | Puts the component into 'indeterminate' state; Ignores 'value' prop | +| thickness | `number` | `0.2` | The thickness of progress indicator as a ratio of `size`. Must be between `0` and `1` | +| angle | `number` | `0` | Angle to rotate progress indicator by | +| trackColor | `string` | `gray` | The color name of the progress track. Use a color key in the theme object | +| color | `string` | `blue` | The color of the progress indicator. Use a color key in the theme object | ## Slots -| Name | Description | -| ---------- | --------------------------------------------------------------------------------- | -| default | Used for the `CCircularProgressLabel` to display the current progress percentage | + +| Name | Description | +| ------- | -------------------------------------------------------------------------------- | +| default | Used for the `CCircularProgressLabel` to display the current progress percentage | From 55221e3fa50469d4d31c06b0ba66c0c9d4a9fa38 Mon Sep 17 00:00:00 2001 From: carwack Date: Mon, 30 May 2022 09:17:06 +0200 Subject: [PATCH 2/2] fix(docs: undo prettier changes --- website/pages/circularprogress.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/website/pages/circularprogress.mdx b/website/pages/circularprogress.mdx index e68e9dfc..0ee4f9e2 100644 --- a/website/pages/circularprogress.mdx +++ b/website/pages/circularprogress.mdx @@ -1,4 +1,4 @@ -import SEO from '../components/SEO' +import SEO from "../components/SEO"; +// Change the size to 120px + ``` ### Changing the thickness