文档

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

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

超出屏幕范围回弹时间,单位为秒。

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 时触发 index 为选中 item 的索引,再次选中当前 item 时依然会触发。

该问题在 0.4.8-open02 版本已经修复。

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>
  • 本页导读 (0)
文档反馈