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( ReactDOM.render(
<div className="card-container"> <div className="card-container">
<Tabs type="card"> <Tabs type="card">
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane> <TabPane tab="Tab Title 1" key="1">
<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane> <p>Content of Tab Pane 1</p>
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane> <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> </Tabs>
</div> </div>
, mountNode); , mountNode);
```` ````
````css ````css
#components-tabs-demo-card-top .code-box-demo {
background: #ececec;
overflow: hidden;
padding: 24px;
}
.card-container > .ant-tabs-card > .ant-tabs-content { .card-container > .ant-tabs-card > .ant-tabs-content {
height: 120px; height: 120px;
margin-top: -16px; margin-top: -16px;
@ -45,11 +51,25 @@ ReactDOM.render(
padding: 16px; padding: 16px;
} }
.card-container > .ant-tabs-card > .ant-tabs-bar {
border-color: #fff;
}
.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab { .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
border-color: transparent; border-color: transparent;
background: transparent;
} }
.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active { .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
border-color: #fff; 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 category: Components
type: Data Display type: Data Display
title: Tabs title: Tabs
cols: 1
--- ---
Tabs make it easy to switch between different views. Tabs make it easy to switch between different views.

View File

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

View File

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