mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 04:36:19 +08:00
dda45e4796
* feat: support narrow theme mode * chore: rename narrow to compact * chore: height part * chore: preview compact mode * chore: to make site corrected * chore: preview site * docs: 📖 document compact theme usage * docs: tweak theme doc * docs: 📖 Add description about double css bundle size * chore: preview * chore: for preview * chore: adjust pagination * chore: compact mode done! * chore: remove useless todo * chore: fix review bug * chore: fix review bug * chore: fix card margin * chore: fix review bug * chore: fix review bug * chore: improve i18n and transition * Update site/theme/static/common.less Co-Authored-By: 偏右 <afc163@gmail.com> * chore: fix button size and description padding * chore: update snapshots * chore: add compact css bundlesize limit * chore: compact dist support Co-authored-by: afc163 <afc163@gmail.com>
100 lines
2.6 KiB
Markdown
100 lines
2.6 KiB
Markdown
---
|
|
order: 10
|
|
title:
|
|
zh-CN: 卡片式页签容器
|
|
en-US: Container of card type Tab
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
用于容器顶部，需要一点额外的样式覆盖。
|
|
|
|
## en-US
|
|
|
|
Should be used at the top of container, needs to override styles.
|
|
|
|
```jsx
|
|
import { Tabs } from 'antd';
|
|
|
|
const { TabPane } = Tabs;
|
|
|
|
ReactDOM.render(
|
|
<div className="card-container">
|
|
<Tabs type="card">
|
|
<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
|
|
[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-content,
|
|
.card-container > .ant-tabs-card > .ant-tabs-content {
|
|
height: 120px;
|
|
margin-top: -16px;
|
|
}
|
|
|
|
[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane,
|
|
.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
|
|
background: #fff;
|
|
padding: 16px;
|
|
}
|
|
|
|
[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-bar,
|
|
.card-container > .ant-tabs-card > .ant-tabs-bar {
|
|
border-color: #fff;
|
|
}
|
|
|
|
[data-theme='compact'] .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;
|
|
background: transparent;
|
|
}
|
|
|
|
[data-theme='compact'] .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;
|
|
background: #fff;
|
|
}
|
|
```
|
|
|
|
<style>
|
|
#components-tabs-demo-card-top .code-box-demo {
|
|
background: #F5F5F5;
|
|
overflow: hidden;
|
|
padding: 24px;
|
|
}
|
|
[data-theme="dark"] .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
}
|
|
[data-theme="dark"] #components-tabs-demo-card-top .code-box-demo {
|
|
background: #000;
|
|
}
|
|
[data-theme="dark"] .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
|
|
background: #141414;
|
|
}
|
|
[data-theme="dark"] .card-container > .ant-tabs-card > .ant-tabs-bar {
|
|
border-color: #141414;
|
|
}
|
|
[data-theme="dark"] .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
|
|
border-color: #141414;
|
|
background: #141414;
|
|
}
|
|
</style>
|