mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-04 04:58:55 +08:00
Tweak tabs style at card top
This commit is contained in:
parent
e24a8cb5d8
commit
e977f2435e
@ -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>
|
||||||
|
@ -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.
|
||||||
|
@ -3,6 +3,7 @@ category: Components
|
|||||||
subtitle: 标签页
|
subtitle: 标签页
|
||||||
type: Data Display
|
type: Data Display
|
||||||
title: Tabs
|
title: Tabs
|
||||||
|
cols: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
选项卡切换组件。
|
选项卡切换组件。
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user