You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.0 KiB
95 lines
2.0 KiB
import React, { useState } from 'react';
|
|
import { Steps } from 'antd';
|
|
|
|
const App: React.FC = () => {
|
|
const [current, setCurrent] = useState(0);
|
|
|
|
const onChange = (value: number) => {
|
|
console.log('onChange:', value);
|
|
setCurrent(value);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Steps
|
|
type="navigation"
|
|
size="small"
|
|
current={current}
|
|
onChange={onChange}
|
|
className="site-navigation-steps"
|
|
items={[
|
|
{
|
|
title: 'Step 1',
|
|
subTitle: '00:00:05',
|
|
status: 'finish',
|
|
description: 'This is a description.',
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
subTitle: '00:01:02',
|
|
status: 'process',
|
|
description: 'This is a description.',
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
subTitle: 'waiting for longlong time',
|
|
status: 'wait',
|
|
description: 'This is a description.',
|
|
},
|
|
]}
|
|
/>
|
|
<Steps
|
|
type="navigation"
|
|
current={current}
|
|
onChange={onChange}
|
|
className="site-navigation-steps"
|
|
items={[
|
|
{
|
|
status: 'finish',
|
|
title: 'Step 1',
|
|
},
|
|
{
|
|
status: 'process',
|
|
title: 'Step 2',
|
|
},
|
|
{
|
|
status: 'wait',
|
|
title: 'Step 3',
|
|
},
|
|
{
|
|
status: 'wait',
|
|
title: 'Step 4',
|
|
},
|
|
]}
|
|
/>
|
|
<Steps
|
|
type="navigation"
|
|
size="small"
|
|
current={current}
|
|
onChange={onChange}
|
|
className="site-navigation-steps"
|
|
items={[
|
|
{
|
|
status: 'finish',
|
|
title: 'finish 1',
|
|
},
|
|
{
|
|
status: 'finish',
|
|
title: 'finish 2',
|
|
},
|
|
{
|
|
status: 'process',
|
|
title: 'current process',
|
|
},
|
|
{
|
|
status: 'wait',
|
|
title: 'wait',
|
|
disabled: true,
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
|