ant-design-vue/components/tabs/demo/card.vue

37 lines
704 B
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<docs>
---
order: 7
title:
zh-CN: 卡片式页签
en-US: Card type tab
---
## zh-CN
另一种样式的页签不提供对应的垂直样式
## en-US
Another type Tabs, which doesn't support vertical mode.
</docs>
<template>
<a-tabs v-model:activeKey="activeKey" type="card">
<a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
<a-tab-pane key="2" tab="Tab 2">Content of Tab Pane 2</a-tab-pane>
<a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
</a-tabs>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
activeKey: ref('1'),
};
},
});
</script>