ant-design/components/progress/demo/circle-steps.tsx

34 lines
1.0 KiB
TypeScript
Raw Normal View History

feat: steps support for circular progress bar (#47940) * feat: steps support for circular progress bar * Update components/progress/index.zh-CN.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/progress.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/__tests__/index.test.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/demo/circle-steps.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update circle-steps.tsx * Update components/progress/progress.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update package.json * Update components/progress/demo/circle-steps.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
2024-03-24 18:30:53 +08:00
import React from 'react';
import { Flex, Progress, Slider, Typography } from 'antd';
feat: steps support for circular progress bar (#47940) * feat: steps support for circular progress bar * Update components/progress/index.zh-CN.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/progress.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/__tests__/index.test.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/demo/circle-steps.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update circle-steps.tsx * Update components/progress/progress.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update package.json * Update components/progress/demo/circle-steps.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
2024-03-24 18:30:53 +08:00
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 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>
</>
);
};
feat: steps support for circular progress bar (#47940) * feat: steps support for circular progress bar * Update components/progress/index.zh-CN.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/progress.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/__tests__/index.test.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/demo/circle-steps.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update circle-steps.tsx * Update components/progress/progress.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update package.json * Update components/progress/demo/circle-steps.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
2024-03-24 18:30:53 +08:00
export default App;