mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
bd1a6c44d4
close #27557
1.4 KiB
1.4 KiB
order | title | ||||
---|---|---|---|---|---|
6 |
|
zh-CN
有四个位置,tabPosition="left|right|top|bottom"
。在移动端下,left|right
会自动切换成 top
。
en-US
Tab's position: left, right, top or bottom. Will auto switch to top
in mobile.
import { Tabs, Radio, Space } from 'antd';
const { TabPane } = Tabs;
class Demo extends React.Component {
state = {
tabPosition: 'left',
};
changeTabPosition = e => {
this.setState({ tabPosition: e.target.value });
};
render() {
const { tabPosition } = this.state;
return (
<>
<Space style={{ marginBottom: 24 }}>
Tab position:
<Radio.Group value={tabPosition} onChange={this.changeTabPosition}>
<Radio.Button value="top">top</Radio.Button>
<Radio.Button value="bottom">bottom</Radio.Button>
<Radio.Button value="left">left</Radio.Button>
<Radio.Button value="right">right</Radio.Button>
</Radio.Group>
</Space>
<Tabs tabPosition={tabPosition}>
<TabPane tab="Tab 1" key="1">
Content of Tab 1
</TabPane>
<TabPane tab="Tab 2" key="2">
Content of Tab 2
</TabPane>
<TabPane tab="Tab 3" key="3">
Content of Tab 3
</TabPane>
</Tabs>
</>
);
}
}
ReactDOM.render(<Demo />, mountNode);