Tabs - 图1

Tabs Vue Component

Tabs allow to simply switch between different content. Tabs Vue component represents Tabs component.

Tabs Components

There are following components included:

  • f7-tabs
  • f7-tab

Tabs Properties

PropTypeDescription
<f7-tabs> properties
animatedbooleanEnables animated tabs
swipeablebooleanEnables swipeable tabs
routablebooleanEnables routable tabs
swiper-paramsobjectObject with Swiper parameters (applies if swipeable enabled)
<f7-tab> properties
tab-activebooleanDefines currently active/visible tab
idstringTab ID

Tabs Methods

<f7-tab> methods
.show(animate)Show this tab

Tabs Events

EventDescription
<f7-tab> events
tab:showEvent will be triggered when Tab becomes visible/active
tab:hideEvent will be triggered when Tab becomes invisible/inactive

Switch Tabs

You can control/switch tabs:

Examples

Static Tabs

  1. <f7-page :page-content="false">
  2. <f7-navbar title="Static Tabs" back-link="Back"></f7-navbar>
  3. <f7-toolbar tabbar bottom>
  4. <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
  5. <f7-link tab-link="#tab-2">Tab 2</f7-link>
  6. <f7-link tab-link="#tab-3">Tab 3</f7-link>
  7. </f7-toolbar>
  8. <f7-tabs>
  9. <f7-tab id="tab-1" class="page-content" tab-active>
  10. <f7-block>
  11. <p>Tab 1 content</p>
  12. ...
  13. </f7-block>
  14. </f7-tab>
  15. <f7-tab id="tab-2" class="page-content">
  16. <f7-block>
  17. <p>Tab 2 content</p>
  18. ...
  19. </f7-block>
  20. </f7-tab>
  21. <f7-tab id="tab-3" class="page-content">
  22. <f7-block>
  23. <p>Tab 3 content</p>
  24. ...
  25. </f7-block>
  26. </f7-tab>
  27. </f7-tabs>
  28. </f7-page>

Animated Tabs

  1. <f7-page :page-content="false">
  2. <f7-navbar title="Animated Tabs" back-link="Back"></f7-navbar>
  3. <f7-toolbar tabbar bottom>
  4. <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
  5. <f7-link tab-link="#tab-2">Tab 2</f7-link>
  6. <f7-link tab-link="#tab-3">Tab 3</f7-link>
  7. </f7-toolbar>
  8. <f7-tabs animated>
  9. <f7-tab id="tab-1" class="page-content" tab-active>
  10. <f7-block>
  11. <p>Tab 1 content</p>
  12. ...
  13. </f7-block>
  14. </f7-tab>
  15. <f7-tab id="tab-2" class="page-content">
  16. <f7-block>
  17. <p>Tab 2 content</p>
  18. ...
  19. </f7-block>
  20. </f7-tab>
  21. <f7-tab id="tab-3" class="page-content">
  22. <f7-block>
  23. <p>Tab 3 content</p>
  24. ...
  25. </f7-block>
  26. </f7-tab>
  27. </f7-tabs>
  28. </f7-page>

Swipeable Tabs

  1. <f7-page :page-content="false">
  2. <f7-navbar title="Swipeable Tabs" back-link="Back"></f7-navbar>
  3. <f7-toolbar tabbar bottom>
  4. <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
  5. <f7-link tab-link="#tab-2">Tab 2</f7-link>
  6. <f7-link tab-link="#tab-3">Tab 3</f7-link>
  7. </f7-toolbar>
  8. <f7-tabs swipeable>
  9. <f7-tab id="tab-1" class="page-content" tab-active>
  10. <f7-block>
  11. <p>Tab 1 content</p>
  12. ...
  13. </f7-block>
  14. </f7-tab>
  15. <f7-tab id="tab-2" class="page-content">
  16. <f7-block>
  17. <p>Tab 2 content</p>
  18. ...
  19. </f7-block>
  20. </f7-tab>
  21. <f7-tab id="tab-3" class="page-content">
  22. <f7-block>
  23. <p>Tab 3 content</p>
  24. ...
  25. </f7-block>
  26. </f7-tab>
  27. </f7-tabs>
  28. </f7-page>

← Swiper

Text Editor →