ant-design/components/progress/design/demo/status.tsx
lijianan 84ce358d10
site: add BehaviorPattern for en page (#54254)
* site: add BehaviorPattern for en page

* site: add BehaviorPattern for en page

* fix: fix
2025-07-02 10:52:54 +08:00

51 lines
1.2 KiB
TypeScript

import React from 'react';
import { Flex, Progress } from 'antd';
import useLocale from '../../../../.dumi/hooks/useLocale';
const locales = {
cn: {
taskInProgress: '任务进行中',
taskCompleted: '任务完成',
taskFailed: '任务失败',
},
en: {
taskInProgress: 'Task In Progress',
taskCompleted: 'Task Completed',
taskFailed: 'Task Failed',
},
};
const Demo: React.FC = () => {
const [locale] = useLocale(locales);
return (
<Flex vertical gap="middle">
<Flex>
<div style={{ width: 106 }}>{locale.taskInProgress}</div>
<Progress type="line" percent={50} showInfo={false} style={{ width: 320 }} />
</Flex>
<Flex>
<div style={{ width: 106 }}>{locale.taskCompleted}</div>
<Progress
type="line"
percent={100}
status="success"
showInfo={false}
style={{ width: 320 }}
/>
</Flex>
<Flex>
<div style={{ width: 106 }}>{locale.taskFailed}</div>
<Progress
type="line"
percent={30}
status="exception"
showInfo={false}
style={{ width: 320 }}
/>
</Flex>
</Flex>
);
};
export default Demo;