Tabs - 图1

Tabs React Component

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

Tabs Components

There are following components included:

  • Tabs / F7Tabs
  • Tab / F7Tab

Tabs Properties

PropTypeDescription
<Tabs> properties
animatedbooleanEnables animated tabs
swipeablebooleanEnables swipeable tabs
routablebooleanEnables routable tabs
swiperParamsobjectObject with Swiper parameters (applies if swipeable enabled)
<Tab> properties
tabActivebooleanDefines currently active/visible tab
idstringTab ID

Tabs Methods

<Tab> methods
.show(animate)Show this tab

Tabs Events

EventDescription
<Tab> events
tabShowEvent will be triggered when Tab becomes visible/active
tabHideEvent will be triggered when Tab becomes invisible/inactive

Switch Tabs

You can control/switch tabs:

Examples

Static Tabs

  1. <Page pageContent={false}>
  2. <Navbar title="Static Tabs" backLink="Back"></Navbar>
  3. <Toolbar tabbar bottom>
  4. <Link tabLink="#tab-1" tabLinkActive>Tab 1</Link>
  5. <Link tabLink="#tab-2">Tab 2</Link>
  6. <Link tabLink="#tab-3">Tab 3</Link>
  7. </Toolbar>
  8. <Tabs>
  9. <Tab id="tab-1" className="page-content" tabActive>
  10. <Block>
  11. <p>Tab 1 content</p>
  12. ...
  13. </Block>
  14. </Tab>
  15. <Tab id="tab-2" className="page-content">
  16. <Block>
  17. <p>Tab 2 content</p>
  18. ...
  19. </Block>
  20. </Tab>
  21. <Tab id="tab-3" className="page-content">
  22. <Block>
  23. <p>Tab 3 content</p>
  24. ...
  25. </Block>
  26. </Tab>
  27. </Tabs>
  28. </Page>

Animated Tabs

  1. <Page pageContent={false}>
  2. <Navbar title="Animated Tabs" backLink="Back"></Navbar>
  3. <Toolbar tabbar bottom>
  4. <Link tabLink="#tab-1" tabLinkActive>Tab 1</Link>
  5. <Link tabLink="#tab-2">Tab 2</Link>
  6. <Link tabLink="#tab-3">Tab 3</Link>
  7. </Toolbar>
  8. <Tabs animated>
  9. <Tab id="tab-1" className="page-content" tabActive>
  10. <Block>
  11. <p>Tab 1 content</p>
  12. ...
  13. </Block>
  14. </Tab>
  15. <Tab id="tab-2" className="page-content">
  16. <Block>
  17. <p>Tab 2 content</p>
  18. ...
  19. </Block>
  20. </Tab>
  21. <Tab id="tab-3" className="page-content">
  22. <Block>
  23. <p>Tab 3 content</p>
  24. ...
  25. </Block>
  26. </Tab>
  27. </Tabs>
  28. </Page>

Swipeable Tabs

  1. <Page pageContent={false}>
  2. <Navbar title="Swipeable Tabs" backLink="Back"></Navbar>
  3. <Toolbar tabbar bottom>
  4. <Link tabLink="#tab-1" tabLinkActive>Tab 1</Link>
  5. <Link tabLink="#tab-2">Tab 2</Link>
  6. <Link tabLink="#tab-3">Tab 3</Link>
  7. </Toolbar>
  8. <Tabs swipeable>
  9. <Tab id="tab-1" className="page-content" tabActive>
  10. <Block>
  11. <p>Tab 1 content</p>
  12. ...
  13. </Block>
  14. </Tab>
  15. <Tab id="tab-2" className="page-content">
  16. <Block>
  17. <p>Tab 2 content</p>
  18. ...
  19. </Block>
  20. </Tab>
  21. <Tab id="tab-3" className="page-content">
  22. <Block>
  23. <p>Tab 3 content</p>
  24. ...
  25. </Block>
  26. </Tab>
  27. </Tabs>
  28. </Page>

← Swiper

Text Editor →