mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 09:39:10 +08:00
1da8126123
* docs(steps): update demo * fix(steps): fix steps style fix #39088 * test: update snapshot * fix: update * chore: additional RTL styles
1.9 KiB
1.9 KiB
order | title | debug | ||||
---|---|---|---|---|---|---|
99 |
|
true |
zh-CN
Buggy!
en-US
Buggy!
import type { StepsProps } from 'antd';
import { Button, Steps, Space } from 'antd';
import React, { useState } from 'react';
const App: React.FC = () => {
const [percent, setPercentage] = useState<number | undefined>(0);
const [current, setCurrent] = useState(1);
const [status, setStatus] = useState<StepsProps['status']>('process');
const description = 'This is a description.';
const items = [
{
title: 'Finished',
description,
},
{
title: 'In Progress',
subTitle: 'Left 00:00:08',
description,
},
{
title: 'Waiting',
description,
},
];
return (
<>
<Space.Compact block>
<Button onClick={() => setPercentage(undefined)}>Percentage to undefined</Button>
<Button onClick={() => setPercentage(prev => ((prev ?? 0) + 10) % 100)}>
Percentage +
</Button>
<Button onClick={() => setCurrent(prev => (prev + 1) % 3)}>Current +</Button>
<Button onClick={() => setStatus('wait')}>Status Wait</Button>
<Button onClick={() => setStatus('process')}>Status Process</Button>
<Button onClick={() => setStatus('finish')}>Status Finish</Button>
<Button onClick={() => setStatus('error')}>Status Error</Button>
</Space.Compact>
<br />
<Steps current={current} percent={percent} status={status} items={items} />
<Steps current={current} percent={percent} status={status} size="small" items={items} />
<Steps
current={current}
percent={percent}
status={status}
direction="vertical"
items={items}
/>
<Steps
current={current}
percent={percent}
status={status}
size="small"
direction="vertical"
items={items}
/>
</>
);
};
export default App;