Tweak tabs style at card top

This commit is contained in:
afc163 2017-06-26 20:20:57 +08:00
parent e24a8cb5d8
commit e977f2435e
4 changed files with 31 additions and 10 deletions

View File

@ -20,21 +20,27 @@ const TabPane = Tabs.TabPane;
ReactDOM.render(
<div className="card-container">
<Tabs type="card">
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
<TabPane tab="Tab Title 1" key="1">
<p>Content of Tab Pane 1</p>
<p>Content of Tab Pane 1</p>
<p>Content of Tab Pane 1</p>
</TabPane>
<TabPane tab="Tab Title 2" key="2">
<p>Content of Tab Pane 2</p>
<p>Content of Tab Pane 2</p>
<p>Content of Tab Pane 2</p>
</TabPane>
<TabPane tab="Tab Title 3" key="3">
<p>Content of Tab Pane 3</p>
<p>Content of Tab Pane 3</p>
<p>Content of Tab Pane 3</p>
</TabPane>
</Tabs>
</div>
, mountNode);
````
````css
#components-tabs-demo-card-top .code-box-demo {
background: #ececec;
overflow: hidden;
padding: 24px;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
height: 120px;
margin-top: -16px;
@ -45,11 +51,25 @@ ReactDOM.render(
padding: 16px;
}
.card-container > .ant-tabs-card > .ant-tabs-bar {
border-color: #fff;
}
.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
border-color: transparent;
background: transparent;
}
.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
border-color: #fff;
background: #fff;
}
````
<style>
#components-tabs-demo-card-top .code-box-demo {
background: #F5F5F5;
overflow: hidden;
padding: 24px;
}
</style>

View File

@ -2,6 +2,7 @@
category: Components
type: Data Display
title: Tabs
cols: 1
---
Tabs make it easy to switch between different views.

View File

@ -3,6 +3,7 @@ category: Components
subtitle: 标签页
type: Data Display
title: Tabs
cols: 1
---
选项卡切换组件。

View File

@ -25,7 +25,6 @@
}
&&-card > &-bar &-tab-active {
background: @component-background;
transform: translateZ(0);
border-color: @border-color-base;
color: @primary-color;
padding-bottom: 5px;