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

    Prop Type Description
    <Tabs> properties
    animated boolean Enables animated tabs
    swipeable boolean Enables swipeable tabs
    routable boolean Enables routable tabs
    <Tab> properties
    tabActive boolean Defines currently active/visible tab
    id string Tab ID

    Tabs Methods

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

    Tabs Events

    Event Description
    <Tab> events
    tabShow Event will be triggered when Tab becomes visible/active
    tabHide Event will be triggered when Tab becomes invisible/inactive

    Switch Tabs

    You can control/switch tabs:

    Examples

    Static Tabs

    <Page pageContent={false}>
      <Navbar title="Static Tabs" backLink="Back"></Navbar>
      <Toolbar tabbar>
        <Link tabLink="#tab-1" tabLinkActive>Tab 1</Link>
        <Link tabLink="#tab-2">Tab 2</Link>
        <Link tabLink="#tab-3">Tab 3</Link>
      </Toolbar>
      <Tabs>
        <Tab id="tab-1" className="page-content" tabActive>
          <Block>
            <p>Tab 1 content</p>
            ...
          </Block>
        </Tab>
        <Tab id="tab-2" className="page-content">
          <Block>
            <p>Tab 2 content</p>
            ...
          </Block>
        </Tab>
        <Tab id="tab-3" className="page-content">
          <Block>
            <p>Tab 3 content</p>
            ...
          </Block>
        </Tab>
      </Tabs>
    </Page>
    

    Animated Tabs

    <Page pageContent={false}>
      <Navbar title="Animated Tabs" backLink="Back"></Navbar>
      <Toolbar tabbar>
        <Link tabLink="#tab-1" tabLinkActive>Tab 1</Link>
        <Link tabLink="#tab-2">Tab 2</Link>
        <Link tabLink="#tab-3">Tab 3</Link>
      </Toolbar>
      <Tabs animated>
        <Tab id="tab-1" className="page-content" tabActive>
          <Block>
            <p>Tab 1 content</p>
            ...
          </Block>
        </Tab>
        <Tab id="tab-2" className="page-content">
          <Block>
            <p>Tab 2 content</p>
            ...
          </Block>
        </Tab>
        <Tab id="tab-3" className="page-content">
          <Block>
            <p>Tab 3 content</p>
            ...
          </Block>
        </Tab>
      </Tabs>
    </Page>
    

    Swipeable Tabs

    <Page pageContent={false}>
      <Navbar title="Swipeable Tabs" backLink="Back"></Navbar>
      <Toolbar tabbar>
        <Link tabLink="#tab-1" tabLinkActive>Tab 1</Link>
        <Link tabLink="#tab-2">Tab 2</Link>
        <Link tabLink="#tab-3">Tab 3</Link>
      </Toolbar>
      <Tabs swipeable>
        <Tab id="tab-1" className="page-content" tabActive>
          <Block>
            <p>Tab 1 content</p>
            ...
          </Block>
        </Tab>
        <Tab id="tab-2" className="page-content">
          <Block>
            <p>Tab 2 content</p>
            ...
          </Block>
        </Tab>
        <Tab id="tab-3" className="page-content">
          <Block>
            <p>Tab 3 content</p>
            ...
          </Block>
        </Tab>
      </Tabs>
    </Page>