mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
2.1 KiB
2.1 KiB
order | title | ||||
---|---|---|---|---|---|
11 |
|
zh-CN
导航类型的步骤条。
en-US
Navigation steps.
import { Steps } from 'antd';
import React, { useState } from 'react';
const { Step } = Steps;
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"
>
<Step
title="Step 1"
subTitle="00:00:05"
status="finish"
description="This is a description."
/>
<Step
title="Step 2"
subTitle="00:01:02"
status="process"
description="This is a description."
/>
<Step
title="Step 3"
subTitle="waiting for longlong time"
status="wait"
description="This is a description."
/>
</Steps>
<Steps
type="navigation"
current={current}
onChange={onChange}
className="site-navigation-steps"
>
<Step status="finish" title="Step 1" />
<Step status="process" title="Step 2" />
<Step status="wait" title="Step 3" />
<Step status="wait" title="Step 4" />
</Steps>
<Steps
type="navigation"
size="small"
current={current}
onChange={onChange}
className="site-navigation-steps"
>
<Step status="finish" title="finish 1" />
<Step status="finish" title="finish 2" />
<Step status="process" title="current process" />
<Step status="wait" title="wait" disabled />
</Steps>
</>
);
};
export default App;
[data-theme='compact'] .site-navigation-steps,
.site-navigation-steps {
margin-bottom: 60px;
box-shadow: 0px -1px 0 0 #e8e8e8 inset;
}