All Products
Search
Document Center

Mobile Platform as a Service:TabPanel

Last Updated:Mar 08, 2022

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 v-model binding.

Number

0

initial-value

Index of the initially selected tab item, used to support higher-performance scenarios that do not require v-model binding.

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.

index indicates the index of the selected item.

(It is triggered when the current item is selected again.

This issue has been resolved since version 0.4.8-open02.)

Function (index: number): void

TabPanelItem

slots

Name

Description

Scope

-

Placeholder for populated content.

-

Demo

Tab-panel

Sample image

Tag

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>