mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
60 lines
1.1 KiB
TypeScript
60 lines
1.1 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
import { Divider, Steps } from 'antd';
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [current, setCurrent] = useState(0);
|
||
|
|
||
|
const onChange = (value: number) => {
|
||
|
console.log('onChange:', current);
|
||
|
setCurrent(value);
|
||
|
};
|
||
|
const description = 'This is a description.';
|
||
|
|
||
|
return (
|
||
|
<>
|
||
|
<Steps
|
||
|
current={current}
|
||
|
onChange={onChange}
|
||
|
items={[
|
||
|
{
|
||
|
title: 'Step 1',
|
||
|
description,
|
||
|
},
|
||
|
{
|
||
|
title: 'Step 2',
|
||
|
description,
|
||
|
},
|
||
|
{
|
||
|
title: 'Step 3',
|
||
|
description,
|
||
|
},
|
||
|
]}
|
||
|
/>
|
||
|
|
||
|
<Divider />
|
||
|
|
||
|
<Steps
|
||
|
current={current}
|
||
|
onChange={onChange}
|
||
|
direction="vertical"
|
||
|
items={[
|
||
|
{
|
||
|
title: 'Step 1',
|
||
|
description,
|
||
|
},
|
||
|
{
|
||
|
title: 'Step 2',
|
||
|
description,
|
||
|
},
|
||
|
{
|
||
|
title: 'Step 3',
|
||
|
description,
|
||
|
},
|
||
|
]}
|
||
|
/>
|
||
|
</>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|