mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 08:59:15 +08:00
502dac12aa
* docs: fix code * feat: lint * feat: prettier * feat: test * feat: review * feat: format html * feat: format html
61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import type { StepsProps } from 'antd';
|
|
import { Button, Space, Steps } from 'antd';
|
|
|
|
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;
|