mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
Add card tabs on container top
This commit is contained in:
parent
56e98e1cdc
commit
a334065edb
40
components/tabs/demo/card-top.md
Normal file
40
components/tabs/demo/card-top.md
Normal 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;
|
||||||
|
}
|
||||||
|
````
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
- order: 8
|
- order: 8
|
||||||
|
|
||||||
另一种样式的页签,常用于容器顶部,可添加和关闭新标签,不提供对应的垂直样式。
|
另一种样式的页签,不提供对应的垂直样式。
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
- order: 9
|
- order: 9
|
||||||
|
|
||||||
只有卡片样式的页签支持关闭选项。
|
只有卡片样式的页签支持新增和关闭选项。
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user