全部产品
云市场
云游戏

Tab 选项卡

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

Tab 选项卡文档介绍了使用该组件的不同方式以及 API 文档:

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

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

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

Kylin

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

ESModule

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

API 说明

Tab

props

属性 说明 类型 默认值
scroll 是否支持滚动 boolean false
value 选中的tab-itemid,支持v-model number, string null
initial-value 初始选中的tab-itemid,支持非v-model场景 number, string null
resistant 滑动超出屏幕范围时的速度比率 (px/s) number 0.2
reverseTime 超出屏幕范围回弹时间 (s) number 0.15
slideTime 滑动后的惯性时间 (s) number 0.3
slideRate 滑动后的惯性距离比例 (distance = slideRate * speed) number 0.1

slots

name 说明 scope
- 用于填充 TabItem -

events

name 说明 函数
input 改变选中的 item 时触发 Function (value: [string, number]): void

TabItem

props

属性 说明 类型 默认值
id 标识每个 item 的 id string, number -

slots

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

Demo

Tab

效果示例

代码示例

  1. <template>
  2. <Tab v-model="selected">
  3. <TabItem v-for="i in 3" v-bind:key="i" :id="i">选项 {{ i }}</TabItem>
  4. </Tab>
  5. </template>
  6. <script type="text/javascript">
  7. export default {
  8. data() {
  9. return {
  10. selected: 1,
  11. };
  12. },
  13. };
  14. </script>