ant-design/components/progress/demo/size.tsx

31 lines
1.0 KiB
TypeScript
Raw Normal View History

import React from 'react';
2024-02-20 15:02:22 +08:00
import { Flex, Progress } from 'antd';
const App: React.FC = () => (
2024-02-20 15:02:22 +08:00
<Flex vertical gap="middle">
<Flex vertical gap="small" style={{ width: 300 }}>
<Progress percent={50} />
<Progress percent={50} size="small" />
<Progress percent={50} size={[300, 20]} />
2024-02-20 15:02:22 +08:00
</Flex>
<Flex align="center" wrap gap={30}>
<Progress type="circle" percent={50} />
<Progress type="circle" percent={50} size="small" />
<Progress type="circle" percent={50} size={20} />
2024-02-20 15:02:22 +08:00
</Flex>
<Flex align="center" wrap gap={30}>
<Progress type="dashboard" percent={50} />
<Progress type="dashboard" percent={50} size="small" />
<Progress type="dashboard" percent={50} size={20} />
2024-02-20 15:02:22 +08:00
</Flex>
<Flex align="center" wrap gap={30}>
<Progress steps={3} percent={50} />
<Progress steps={3} percent={50} size="small" />
<Progress steps={3} percent={50} size={20} />
<Progress steps={3} percent={50} size={[20, 30]} />
2024-02-20 15:02:22 +08:00
</Flex>
</Flex>
);
export default App;