All Products
Search
Document Center

Tab

Last Updated: Mar 07, 2022

This topic describes different methods of using Tab component and the API descriptions:

  • Use this component in the Kylin project.

  • Use this component in other projects. Import it through ESModule.

  • API description provides API information for props, slots, and events.

To view the visual effects and code sample of the component, see Demo.

Kylin

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

ESModule

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

API description

Tab

props

Property

Type

Default value

Description

scroll

Boolean

false

Whether to support scrolling.

value

Number, String

null

id of the selected tab-item. v-model is supported.

initial-value

Number, String

null

id of the initially selected tab-item. Non-v-model scenarios are supported.

resistant

Number

0.2

Speed ratio (pixels per second) when sliding is out of the screen.

reverseTime

Number

0.15

Bounce time when sliding is out of the screen, in seconds.

slideTime

Number

0.3

Inertia time after sliding, in seconds.

slideRate

Number

0.1

Inertia distance ratio after sliding (distance = slideRate × speed).

slots

Name

Description

Scope

-

Used for populating TabItem.

-

events

Name

Description

Function

input

Triggered when the selected item is changed.

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

TabItem

props

Property

Description

Type

id

ID used to identify an item.

String, Number

slots

Name

Description

Scope

-

Placeholder for populated content.

-

Demo

Tab

Sample image

option

Sample code

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

<script type="text/javascript">
  export default {
    data() {
      return {
        selected: 1,
      };
    },
  };
</script>