forked from ant-design/ant-design
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
demo: update Progress demo (ant-design#48052)
* demo: update Progress demo * fix: fix * fix: fix * fix: fix * fix: update snap
- Loading branch information
1 parent
82c282e
commit c1927ed
Showing
4 changed files
with
209 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| ## zh-CN | ||
|
|
||
| 步骤进度圈，支持颜色分段展示。 | ||
| 步骤进度圈，支持颜色分段展示，默认间隔为 2px。 | ||
|
|
||
| ## en-US | ||
|
|
||
| A circular progress bar that support steps. | ||
| A circular progress bar that support steps and color segments, default gap is 2px. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,33 @@ | ||
| import { Progress, Space } from 'antd'; | ||
| import React from 'react'; | ||
| import { Flex, Progress, Slider, Typography } from 'antd'; | ||
|
|
||
| const App: React.FC = () => ( | ||
| <Space wrap> | ||
| <Progress | ||
| type="dashboard" | ||
| steps={8} | ||
| percent={50} | ||
| trailColor="rgba(0, 0, 0, 0.06)" | ||
| strokeWidth={20} | ||
| /> | ||
| <Progress | ||
| type="circle" | ||
| percent={100} | ||
| steps={{ count: 5, gap: 12 }} | ||
| trailColor="rgba(0, 0, 0, 0.06)" | ||
| strokeWidth={20} | ||
| /> | ||
| </Space> | ||
| ); | ||
| const App: React.FC = () => { | ||
| const [stepsCount, setStepsCount] = React.useState<number>(5); | ||
| const [stepsGap, setStepsGap] = React.useState<number>(7); | ||
| return ( | ||
| <> | ||
| <Typography.Title level={5}>Custom count:</Typography.Title> | ||
| <Slider min={2} max={10} value={stepsCount} onChange={setStepsCount} /> | ||
| <Typography.Title level={5}>Custom gap:</Typography.Title> | ||
| <Slider step={4} min={0} max={40} value={stepsGap} onChange={setStepsGap} /> | ||
| <Flex wrap="wrap" gap="middle" style={{ marginTop: 16 }}> | ||
| <Progress | ||
| type="dashboard" | ||
| steps={8} | ||
| percent={50} | ||
| trailColor="rgba(0, 0, 0, 0.06)" | ||
| strokeWidth={20} | ||
| /> | ||
| <Progress | ||
| type="circle" | ||
| percent={100} | ||
| steps={{ count: stepsCount, gap: stepsGap }} | ||
| trailColor="rgba(0, 0, 0, 0.06)" | ||
| strokeWidth={20} | ||
| /> | ||
| </Flex> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default App; |