ant-design/components/tabs/demo/slide.md

56 lines
1.1 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 3
2017-02-04 01:13:35 +08:00
title:
zh-CN: 滑动
en-US: Slide
2016-03-31 09:40:55 +08:00
---
2015-06-12 20:21:13 +08:00
2016-08-03 10:39:20 +08:00
## zh-CN
可以左右、上下滑动,容纳更多标签。
2015-06-12 20:21:13 +08:00
2016-08-03 10:39:20 +08:00
## en-US
2018-05-26 13:15:43 +08:00
In order to fit in more tabs, they can slide left and right (or up and down).
2016-08-03 10:39:20 +08:00
2019-05-07 14:57:32 +08:00
```jsx
import { Tabs, Radio } from 'antd';
2018-06-27 15:55:04 +08:00
const { TabPane } = Tabs;
2015-06-12 20:21:13 +08:00
class SlidingTabsDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
mode: 'top',
};
}
2018-06-27 15:55:04 +08:00
2019-05-07 14:57:32 +08:00
handleModeChange = e => {
const mode = e.target.value;
this.setState({ mode });
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
render() {
const { mode } = this.state;
return (
<div>
<Radio.Group onChange={this.handleModeChange} value={mode} style={{ marginBottom: 8 }}>
<Radio.Button value="top">Horizontal</Radio.Button>
<Radio.Button value="left">Vertical</Radio.Button>
</Radio.Group>
2019-05-07 14:57:32 +08:00
<Tabs defaultActiveKey="1" tabPosition={mode} style={{ height: 220 }}>
2019-05-22 12:25:57 +08:00
{[...Array(30).keys()].map((i) => (
<TabPane tab={`Tab-${i}`} key={i}>
Content of tab {i}
</TabPane>
))}
</Tabs>
</div>
);
}
}
ReactDOM.render(<SlidingTabsDemo />, mountNode);
2019-05-07 14:57:32 +08:00
```