mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
dda45e4796
* feat: support narrow theme mode * chore: rename narrow to compact * chore: height part * chore: preview compact mode * chore: to make site corrected * chore: preview site * docs: 📖 document compact theme usage * docs: tweak theme doc * docs: 📖 Add description about double css bundle size * chore: preview * chore: for preview * chore: adjust pagination * chore: compact mode done! * chore: remove useless todo * chore: fix review bug * chore: fix review bug * chore: fix card margin * chore: fix review bug * chore: fix review bug * chore: improve i18n and transition * Update site/theme/static/common.less Co-Authored-By: 偏右 <afc163@gmail.com> * chore: fix button size and description padding * chore: update snapshots * chore: add compact css bundlesize limit * chore: compact dist support Co-authored-by: afc163 <afc163@gmail.com>
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 (
|
|
<div>
|
|
<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>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<Demo />, mountNode);
|
|
```
|
|
|
|
```css
|
|
[data-theme='compact'] .site-navigation-steps,
|
|
.site-navigation-steps {
|
|
margin-bottom: 60px;
|
|
box-shadow: 0px -1px 0 0 #e8e8e8 inset;
|
|
}
|
|
```
|
|
|
|
<style>
|
|
[data-theme="dark"] .site-navigation-steps {
|
|
border-bottom: 1px solid #303030;
|
|
margin-bottom: 60px;
|
|
box-shadow: none;
|
|
}
|
|
</style>
|