mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 07:39:10 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
2.1 KiB
2.1 KiB
| order | title | ||||
|---|---|---|---|---|---|
| 11 |
|
zh-CN
导航类型的步骤条。
en-US
Navigation steps.
import React, { useState } from 'react';
import { Steps } from 'antd';
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;
}