Add card tabs on container top

This commit is contained in:
afc163 2015-12-17 12:33:34 +08:00
parent 56e98e1cdc
commit a334065edb
4 changed files with 43 additions and 3 deletions

View File

@ -0,0 +1,40 @@
# 卡片式页签容器
- order: 10
用于容器顶部。
---
````jsx
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
ReactDOM.render(
<div className="card-container">
<Tabs type="card">
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
<TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
</Tabs>
</div>, document.getElementById('components-tabs-demo-card-top'));
````
````css
#components-tabs-demo-card-top {
background: #ECECEC;
overflow: hidden;
padding: 24px;
}
.card-container .ant-tabs-content {
background: #fff;
padding: 16px;
height: 120px;
margin-top: -16px;
}
.card-container .ant-tabs-tabs-bar,
.card-container .ant-tabs.ant-tabs-card .ant-tabs-tab-active {
border-color: #fff;
}
````

View File

@ -2,7 +2,7 @@
- order: 8 - order: 8
另一种样式的页签,常用于容器顶部,可添加和关闭新标签,不提供对应的垂直样式。 另一种样式的页签,不提供对应的垂直样式。
--- ---

View File

@ -2,7 +2,7 @@
- order: 9 - order: 9
只有卡片样式的页签支持关闭选项。 只有卡片样式的页签支持新增和关闭选项。
--- ---

View File

@ -380,7 +380,7 @@
border-bottom: 0; border-bottom: 0;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
transition: all 0.3s @ease-in-out; transition: all 0.3s @ease-in-out;
background: #f7f7f7; background: #f9f9f9;
margin-right: 2px; margin-right: 2px;
} }
&&-card &-tab-inner { &&-card &-tab-inner {