afc163
9 years ago
5 changed files with 45 additions and 31 deletions
@ -0,0 +1,21 @@ |
|||||
|
# 垂直 |
||||
|
|
||||
|
- order: 6 |
||||
|
|
||||
|
选项卡在左边。 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
````jsx |
||||
|
var Tabs = antd.Tabs; |
||||
|
var TabPane = Tabs.TabPane; |
||||
|
|
||||
|
ReactDOM.render( |
||||
|
<Tabs defaultActiveKey="1" tabPosition="left"> |
||||
|
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane> |
||||
|
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane> |
||||
|
<TabPane tab="选项卡三长" key="3">选项卡三内容</TabPane> |
||||
|
</Tabs> |
||||
|
, document.getElementById('components-tabs-demo-vertical-left')); |
||||
|
```` |
||||
|
|
@ -0,0 +1,20 @@ |
|||||
|
# 垂直 |
||||
|
|
||||
|
- order: 7 |
||||
|
|
||||
|
选项卡在右边。 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
````jsx |
||||
|
var Tabs = antd.Tabs; |
||||
|
var TabPane = Tabs.TabPane; |
||||
|
|
||||
|
ReactDOM.render( |
||||
|
<Tabs defaultActiveKey="1" tabPosition="right"> |
||||
|
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane> |
||||
|
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane> |
||||
|
<TabPane tab="选项卡三长" key="3">选项卡三内容</TabPane> |
||||
|
</Tabs> |
||||
|
, document.getElementById('components-tabs-demo-vertical-right')); |
||||
|
```` |
@ -1,28 +0,0 @@ |
|||||
# 垂直 |
|
||||
|
|
||||
- order: 4 |
|
||||
|
|
||||
分成左右两种。 |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
````jsx |
|
||||
var Tabs = antd.Tabs; |
|
||||
var TabPane = Tabs.TabPane; |
|
||||
|
|
||||
ReactDOM.render(<div> |
|
||||
<h3 style={{margin: '0 0 20px'}}>页签在左边</h3> |
|
||||
<Tabs defaultActiveKey="1" tabPosition="left"> |
|
||||
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane> |
|
||||
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane> |
|
||||
<TabPane tab="选项卡三长" key="3">选项卡三内容</TabPane> |
|
||||
</Tabs> |
|
||||
<h3 style={{margin: '40px 0 20px'}}>页签在右边</h3> |
|
||||
<Tabs defaultActiveKey="1" tabPosition="right"> |
|
||||
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane> |
|
||||
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane> |
|
||||
<TabPane tab="选项卡三长" key="3">选项卡三内容</TabPane> |
|
||||
</Tabs> |
|
||||
</div>, document.getElementById('components-tabs-demo-vertical')); |
|
||||
```` |
|
||||
|
|
Loading…
Reference in new issue