All Products
Search
Document Center

Tab

Last Updated: May 27, 2021

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

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

ESModule

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

API description

Tab

props

Property Description Type Default value
scroll Whether to support scrolling. Boolean false
value id of the selected tab-item. v-model is supported. Number, String null
initial-value id of the initially selectedtab-item. Non-v-model scenarios are supported. Number, String null
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
slideTime Inertia time after sliding, in seconds. Number 0.3
slideRate Inertia distance ratio after sliding (distance = slideRate × speed). Number 0.1

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 Default value
id ID used to identify an item. String, Number -

slots

Name Description Scope
- Placeholder for populated content. —-

Demo

Tab

Sample image

Sample code

 
  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>