全部产品
云市场
云游戏

TabPanel 标签页面

更新时间:2020-08-07 20:22:28

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

  • Kylin 工程中使用该组件。
  • 在其他工程中使用,请通过 ESModule 的方式导入组件。

API 文档 提供了 props、slots、events 的接口信息。

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

Kylin

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

ESModule

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

API 文档

TabPanel

props

属性 说明 类型 默认值
scroll 是否支持滚动 boolean true
labels 顶部显示标签 array []
value 选中的 tab item 的 index,用来支持v-model绑定 number 0
initial-value 初始选中的 tab item 的 index,用来支持不需要v-model绑定的场景(性能更好) number 0
resistant 滑动超出屏幕范围时的速度比率 (px/s) number 0.2
reverseTime 超出屏幕范围回弹时间 (s) number 0.15
reverseTimingFunction 超出屏幕范围回弹缓动时间 string -
slideTime 滑动后的惯性时间 (s) number 0.3
slideTimingFunction 滑动后的缓动函数 string cubic-bezier(.86,0,.07,1)
slideRate 滑动后的惯性距离比例 (distance = slideRate * speed) number 0.1

slots

name 说明 scope
- 用于填充 TabPanelItem -

events

name 说明 函数
input 选中 item 时触发
index 为选中 item 的索引
(再次选中当前 item 时依然会触发,
该问题在0.4.8-open02 版本已经修复)
Function (index: number): void

TabPanelItem

slots

name 说明 scope
- 填充内容的占位 —-

Demo

Tab-panel

截图

代码

  1. <template>
  2. <TabPanel
  3. :labels="['标签1', '标签2', '标签3', '标签4', '标签5', '标签6', '标签7']"
  4. v-model="selected"
  5. >
  6. <TabPanelItem
  7. v-for="i in 7"
  8. style="text-align: center; height: 100px; background: white"
  9. >
  10. 内容{{ i }}
  11. </TabPanelItem>
  12. </TabPanel>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. selected: 0,
  19. };
  20. },
  21. };
  22. </script>