mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-22 22:48:29 +08:00
e6e260db77
* docs: add Progress design tab * chore: correct lint
32 lines
798 B
TypeScript
32 lines
798 B
TypeScript
import React from 'react';
|
|
import { Flex, Progress, theme } from 'antd';
|
|
|
|
const Demo = () => {
|
|
const { token } = theme.useToken();
|
|
|
|
return (
|
|
<Flex gap="large">
|
|
<Flex gap="small" align="center">
|
|
<Progress size={16} type="circle" percent={68} trailColor={token.colorPrimaryBg} />
|
|
<div>进行中</div>
|
|
</Flex>
|
|
<Flex gap="small" align="center">
|
|
<Progress size={16} type="circle" percent={100} status="success" />
|
|
<div>已完成</div>
|
|
</Flex>
|
|
<Flex gap="small" align="center">
|
|
<Progress
|
|
size={16}
|
|
type="circle"
|
|
percent={68}
|
|
status="exception"
|
|
trailColor={token.colorErrorBg}
|
|
/>
|
|
<div>错误/异常</div>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default Demo;
|