ant-design/components/progress/demo/circle-steps.tsx
2024-04-12 12:10:38 +08:00

34 lines
1.0 KiB
TypeScript

import React from 'react';
import { Flex, Progress, Slider, Typography } from 'antd';
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>
</>
);
};
export default App;