本文介绍了使用 TabPanel 标签页面组件的不同方式以及相关 API。
此外,如需查看该组件的视觉效果及示例代码,参考本文的 Demo。
Kylin
<dependency component="{ TabPanel, TabPanelItem }" src="@alipay/antui-vue" ></dependency>
ESModule
import { TabPanel, TabPanelItem } from '@alipay/antui-vue';
API 说明
TabPanel
props
属性 | 说明 | 类型 | 默认值 |
scroll | 是否支持滚动。 | boolean | true |
labels | 顶部显示标签。 | Array | [] |
value | 选中的 tab item 的 index,用来支持 | Number | 0 |
initial-value | 初始选中的 tab item 的 index,用来支持不需要 | Number | 0 |
resistant | 滑动超出屏幕范围时的速度比率 (px/s)。 | Number | 0.2 |
reverseTime | 超出屏幕范围回弹时间,单位为秒。 | Number | 0.15 |
reverseTimingFunction | 超出屏幕范围回弹缓动时间。 | String | - |
slideTime | 滑动后的惯性时间,单位为秒。 | Number | 0.3 |
slideTimingFunction | 滑动后的缓动函数。 | String | cubic-bezier(.86,0,.07,1) |
slideRate | 滑动后的惯性距离比例 (distance = slideRate * speed)。 | Number | 0.1 |
slots
用于填充 TabPanelItem。
events
属性 | 说明 | 函数 |
input | 选中 item 时触发 该问题在 | Function (index: number): void |
TabPanelItem
slots
填充内容的占位。
Demo
截图
代码示例
<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>
文档内容是否对您有帮助?