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 |
initial-value | Number, String | null | id of the initially selected |
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
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>