mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
f4411d9393
* refactor: Steps cssInJs add basic structure * refactor: change Component Steps less into cssInJs * refactor: ♻️ steps cssInJs code formated * style: 💄 change Steps cssinjs left and right into Logical Properties * style: 💄 steps cssinjs add FIXME for number hardcode * style: 💄 steps cssinjs dismiss useless rtl style * style: 💄 step cssinjs fix the 'not compatible with RTL mode' warning and fix the style in RTL mode * style: code formated for FIXME * style: revert the change about _skip_check_ * style: step cssinjs margin/padding used with Logical properties * ci: fix lint check * style: fix the style on RTL * style: try fix the step subtitle order on RTL mode * style: optimization the style on RTL and dismiss duplicate styles with logical properties
107 lines
2.3 KiB
Markdown
107 lines
2.3 KiB
Markdown
---
|
|
order: 11
|
|
title:
|
|
zh-CN: 导航步骤
|
|
en-US: Navigation Steps
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
导航类型的步骤条。
|
|
|
|
## en-US
|
|
|
|
Navigation steps.
|
|
|
|
```jsx
|
|
import { Steps } from 'antd';
|
|
|
|
const { Step } = Steps;
|
|
|
|
class Demo extends React.Component {
|
|
state = {
|
|
current: 0,
|
|
};
|
|
|
|
onChange = current => {
|
|
console.log('onChange:', current);
|
|
this.setState({ current });
|
|
};
|
|
|
|
render() {
|
|
const { current } = this.state;
|
|
return (
|
|
<>
|
|
<Steps
|
|
type="navigation"
|
|
size="small"
|
|
current={current}
|
|
onChange={this.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={this.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={this.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 Demo;
|
|
```
|
|
|
|
```css
|
|
[data-theme='compact'] .site-navigation-steps.ant-steps.ant-steps-navigation,
|
|
.site-navigation-steps.ant-steps.ant-steps-navigation {
|
|
margin-bottom: 60px;
|
|
box-shadow: 0px -1px 0 0 #e8e8e8 inset;
|
|
}
|
|
```
|
|
|
|
<style>
|
|
[data-theme="dark"] .site-navigation-steps.ant-steps.ant-steps-navigation {
|
|
border-bottom: 1px solid #303030;
|
|
margin-bottom: 60px;
|
|
box-shadow: none;
|
|
}
|
|
</style>
|