This topic describes different methods of using the TabPanel 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="{ TabPanel, TabPanelItem }" src="@alipay/antui-vue" ></dependency>
ESModule
import { TabPanel, TabPanelItem } from '@alipay/antui-vue';
API description
TabPanel
props
Property | Description | Type | Default value |
---|---|---|---|
scroll | Whether to support scrolling. | Boolean | true |
labels | Labels displayed on the top. | Array | [] |
value | Index of the selected tab item, used to support | Number | 0 |
initial-value | Index of the initially selected tab item, used to support higher-performance scenarios that do not require | Number | 0 |
resistant | Speed ratio (pixels per second) when sliding is out of the screen. | Number | 0.2 |
reverseTime | Bounce time when sliding is out of the screen, in seconds. | Number | 0.15 |
reverseTimingFunction | Bounce easing time when sliding is out of the screen. | String | - |
slideTime | Inertia time after sliding, in seconds. | Number | 0.3 |
slideTimingFunction | Easing function after sliding. | String | “cubic-bezier(.86,0,.07,1)” |
slideRate | Inertia distance ratio after sliding (distance = slideRate × speed). | Number | 0.1 |
slots
Name | Description | Scope |
---|---|---|
- | Used for populating TabPanelItem. | - |
events
Name | Description | Function |
---|---|---|
input | Triggered when an item is selected.
(It is triggered when the current item is selected again. This issue has been resolved since version | Function (index: number): void |
TabPanelItem
slots
Name | Description | Scope |
---|---|---|
- | Placeholder for populated content. | - |
Demo
Tab-panel
Sample image
Sample code
<template>
<TabPanel
:labels="['Tag1', 'Tag2', 'Tag3', 'Tag4', 'Tag5', 'Tag6', 'Tag7']"
v-model="selected"
>
<TabPanelItem
v-for="i in 7"
style="text-align: center; height: 100px; background: white"
>
Content{{ i }}
</TabPanelItem>
</TabPanel>
</template>
<script>
export default {
data() {
return {
selected: 0,
};
},
};
</script>