---
title: Steps 步骤条
order: 23
group:
path: /components
nav:
title: 组件
path: /components
---
## TODO
- title 和 description 的上下间距
- 展示类标题
- 导航步骤条
## 使用
### 基本使用
默认水平展示
```jsx
import React from 'react';
import { Steps } from 'baas-ui';
export default () => (
);
```
### 垂直展示
```jsx
import React from 'react';
import { Steps } from 'baas-ui';
export default () => (
);
```
### 导航步骤条
```jsx
import React from 'react';
import { Steps } from 'baas-ui';
class TabSteps extends React.Component {
constructor() {
super();
this.state = {
current: 1,
};
}
onChange = current => {
this.setState({ current });
};
render() {
const { current } = this.state;
return (
);
}
}
export default TabSteps;
```