All Products
Search
Document Center

TabPanel

Last Updated: May 27, 2021

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

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

ESModule

 
  1. 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

Sample code

 
  1. <template>
  2. <TabPanel
  3. :labels="['标签1', '标签2', '标签3', '标签4', '标签5', '标签6', '标签7']"
  4. v-model="selected"
  5. >
  6. <TabPanelItem
  7. v-for="i in 7"
  8. style="text-align: center; height: 100px; background: white"
  9. >
  10. 内容{{ i }}
  11. </TabPanelItem>
  12. </TabPanel>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. selected: 0,
  19. };
  20. },
  21. };
  22. </script>