mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 04:48:02 +08:00
34 lines
1.0 KiB
TypeScript
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;
|