移动开发平台 mPaaS TabPanel 标签页面

TabPanel 标签页面文档介绍了使用该组件的不同方式以及 API 文档：

• 在 Kylin 工程中使用该组件。
• 在其他工程中使用，请通过 ESModule 的方式导入组件。
• API 文档 提供了 props、slots、events 的接口信息。

此外，如需查看该组件的视觉效果及示例代码，参考本文的 Demo。

Kylin

  

   
<dependency component="{ TabPanel, TabPanelItem }" src="@alipay/antui-vue" ></dependency>
  

ESModule

  

   
import { TabPanel, TabPanelItem } from '@alipay/antui-vue';
  

API 文档

• TabPanel
• TabPanelItem

TabPanel

props

slots

events

TabPanelItem

slots

Demo

Tab-panel

截图

代码

  

   
<template>
   
 <TabPanel
   
 :labels="['标签1', '标签2', '标签3', '标签4', '标签5', '标签6', '标签7']"
   
 v-model="selected"
   
 >
   
 <TabPanelItem
   
 v-for="i in 7"
   
 style="text-align: center; height: 100px; background: white"
   
 >
   
 内容{{ i }}
   
 </TabPanelItem>
   
 </TabPanel>
   
</template>
   

   
<script>
   
 export default {
   
 data() {
   
 return {
   
 selected: 0,
   
 };
   
 },
   
 };
   
</script>