文档

Tab 选项卡

更新时间:

本文介绍了使用 Tab 选项卡组件的不同方式以及相关 API。

  • Kylin 工程中使用该组件。

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

  • API 说明 提供了 props、slots、events 的接口信息。

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

Kylin

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

ESModule

import { Tab, TabItem } from '@alipay/antui-vue';

API 说明

Tab

props

属性

类型

默认值

说明

scroll

boolean

false

是否支持滚动。

value

Number,String

null

选中的 tab-item 的 ID,支持 v-model。

initial-value

Number,String

null

初始选中的 tab-item 的 ID,支持非 v-model 场景。

resistant

Number

0.2

滑动超出屏幕范围时的速度比率,单位为 px/s。

reverseTime

Number

0.15

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

slideTime

Number

0.3

滑动后的惯性时间,单位为秒。

slideRate

Number

0.1

滑动后的惯性距离比例 (distance = slideRate * speed)。

slots:用于填充 TabItem。

events

属性

函数

说明

input

Function (value: [string, number]): void

改变选中的 item 时触发。

TabItem

props

属性

类型

说明

id

String,Number

标识每个 item 的 id。

slots:填充内容的占位。

Demo

效果示例

代码示例

<template>
  <Tab v-model="selected">
    <TabItem v-for="i in 3" v-bind:key="i" :id="i">选项 {{ i }}</TabItem>
  </Tab>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        selected: 1,
      };
    },
  };
</script>
  • 本页导读 (0)
文档反馈