78 lines
1.6 KiB
Markdown
78 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>
|
|
|
|
```html
|
|
|
|
<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>
|
|
```
|