76 lines
1.6 KiB
Markdown
76 lines
1.6 KiB
Markdown
<cn>
|
|
#### 卡片式页签容器
|
|
用于容器顶部，需要一点额外的样式覆盖。
|
|
</cn>
|
|
|
|
<us>
|
|
#### Container of card type Tab
|
|
Should be used at the top of container, needs to override styles.
|
|
</us>
|
|
|
|
```tpl
|
|
<template>
|
|
<div class="card-container">
|
|
<a-tabs type="card">
|
|
<a-tab-pane 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>
|
|
</a-tab-pane>
|
|
<a-tab-pane 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>
|
|
</a-tab-pane>
|
|
<a-tab-pane 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>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {};
|
|
},
|
|
methods: {
|
|
callback(key) {
|
|
console.log(key);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.card-container {
|
|
background: #f5f5f5;
|
|
overflow: hidden;
|
|
padding: 24px;
|
|
}
|
|
.card-container > .ant-tabs-card > .ant-tabs-content {
|
|
height: 120px;
|
|
margin-top: -16px;
|
|
}
|
|
|
|
.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
|
|
background: #fff;
|
|
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>
|
|
```
|