ant-design/components/progress/demo/size.tsx
2024-02-20 15:02:22 +08:00

31 lines
1.0 KiB
TypeScript

import React from 'react';
import { Flex, Progress } from 'antd';
const App: React.FC = () => (
<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]} />
</Flex>
<Flex align="center" wrap="wrap" gap={30}>
<Progress type="circle" percent={50} />
<Progress type="circle" percent={50} size="small" />
<Progress type="circle" percent={50} size={20} />
</Flex>
<Flex align="center" wrap="wrap" gap={30}>
<Progress type="dashboard" percent={50} />
<Progress type="dashboard" percent={50} size="small" />
<Progress type="dashboard" percent={50} size={20} />
</Flex>
<Flex align="center" wrap="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]} />
</Flex>
</Flex>
);
export default App;