Tabs

Tabs allow to simply switch between different content.

Tabs Layout

Let's look at Tabs layout:

<!-- Tabs wrapper, shoud have "tabs" class. Required element -->
<div class="tabs">
  <!-- First tab, should have "tab" class and unique id attribute -->
  <!-- First tab is active by default - additional "active" class -->
  <div class="tab active" id="tab1">
    ... Tab 1 content goes here ...
  </div>
  <!-- Second tab, should have "tab" class and unique id attribute -->
  <div class="tab" id="tab2">
    ... Tab 2 content goes here ...
  </div>
  <!-- Third tab, should have "tab" class and unique id attribute -->
  <div class="tab" id="tab3">
    ... Tab 3 content goes here ...
  </div>
</div>  

Where:

  • div class="tabs" - required wrapper for all tabs. If you miss this element, tabs will not work!
  • div class="tab" - single tab. Should have unique id attribute
  • div class="tab active" - single active tab. Tab which is active (visible) by default, should have additional "active" class

Switching between tabs

After we have our tabs layout we need some contoller so user can switch between them.

To make it work we need to create links (<a> tags) with "tab-link" class and href attribute equal to the id attribute of target tab:

<!-- Link that activates first tab, has the same href attribute (#tab1) as the id attribute of first tab (tab1)  -->
<a href="#tab1" class="tab-link active">Tab 1</a>
 
<!-- Link that activates 2nd tab, has the same href attribute (#tab2) as the id attribute of 2nd tab (tab2)  -->
<a href="#tab2" class="tab-link">Tab 2</a>
 
<!-- Link that activates 3rd tab, has the same href attribute (#tab2) as the id attribute of 3rd tab (tab3)  -->
<a href="#tab3" class="tab-link">Tab 3</a> 

As you may see, first link also has "active" class. It is not required, but if all this links will be on the same DOM tree level (the same-level children of mutual parent), then script will also change this "active" class on link related to active tab. It is useful when your "active" link has different visual style (like buttons Buttons Row / Segmented Control or links in Tab bar)

Switch multiple tabs

Such notation as above uses ID attributes to specify tabs we need to switch to. But sometimes we may have situation when we need to switch few tabs using one tab-link, for this case we may use classes instead of IDs and "data-tab" attribute for tab-link. For example:

<!-- Top Tabs -->
<div class="tabs tabs-top">
  <div class="tab tab1 active">...</div>
  <div class="tab tab2">...</div>
  <div class="tab tab3">...</div>
</div>
<!-- Bottom Tabs -->
<div class="tabs tabs-bottom">
  <div class="tab tab1 active">...</div>
  <div class="tab tab2">...</div>
  <div class="tab tab3">...</div>
</div>            
<!-- Tabs links -->
<div class="tab-links">
  <!-- This links will switch top and bottom tabs to .tab1 -->
  <a href="#" class="tab-link" data-tab=".tab1">Tab 1</a>
  <!-- This links will switch top and bottom tabs to .tab2 -->
  <a href="#" class="tab-link" data-tab=".tab2">Tab 2</a>
  <!-- This links will switch top and bottom tabs to .tab3 -->
  <a href="#" class="tab-link" data-tab=".tab3">Tab 3</a>
</div>

Where data-tab attribute of tab-link contains CSS selector of target tab/tabs

Inline Tabs example

<div class="page-content">
  <div class="content-block">
    <!-- Buttons row as tabs controller -->
    <div class="buttons-row">
      <!-- Link to 1st tab, active -->
      <a href="#tab1" class="tab-link active button">Tab 1</a>
      <!-- Link to 2nd tab -->
      <a href="#tab2" class="tab-link button">Tab 2</a>
      <!-- Link to 3rd tab -->
      <a href="#tab3" class="tab-link button">Tab 3</a>
    </div>
  </div>
  <!-- Tabs, tabs wrapper -->
  <div class="tabs">
    <!-- Tab 1, active by default -->
    <div id="tab1" class="tab active">
      <div class="content-block">
        <p>This is tab 1 content</p>
        ...
      </div>
    </div>
    <!-- Tab 2 -->
    <div id="tab2" class="tab">
      <div class="content-block">
        <p>This is tab 2 content</p>
        ...
      </div>
    </div>
    <!-- Tab 3 -->
    <div id="tab3" class="tab">
      <div class="content-block">
        <p>This is tab 3 content</p>
        ...
      </div>
    </div>
  </div>
</div>

Switch tabs from Navbar example

<div class="navbar">
  <div class="navbar-inner">
    <div class="center">
      <!-- Buttons row as tabs controller in navbar-->
      <div class="buttons-row">
        <!-- Link to 1st tab, active -->
        <a href="#tab1" class="tab-link active button">Tab 1</a>
        <!-- Link to 2nd tab -->
        <a href="#tab2" class="tab-link button">Tab 2</a>
        <!-- Link to 3rd tab -->
        <a href="#tab3" class="tab-link button">Tab 3</a>
      </div>
    </div>
  </div>
</div>
<div class="pages">
  <div class="page">
    <!-- Tabs, tabs wrapper, pate-content are tabs now -->
    <div class="page-content tabs">
      <!-- Tab 1, active by default -->
      <div id="tab1" class="tab active">
        <div class="content-block">
          <p>This is tab 1 content</p>
          ...
        </div>
      </div>
      <!-- Tab 2 -->
      <div id="tab2" class="tab">
        <div class="content-block">
          <p>This is tab 2 content</p>
          ...
        </div>
      </div>
      <!-- Tab 3 -->
      <div id="tab3" class="tab">
        <div class="content-block">
          <p>This is tab 3 content</p>
          ...
        </div>
      </div>
    </div>
  </div>
</div>              

Switch views from Tab bar example

Why single Tab could not be a seprate View with its own navigation and layout? It can, so you can just switch Views as tabs:

<!-- Tabs, now tabs wrapper is "views" -->
<div class="views tabs toolbar-fixed">
  <!-- Tab 1 - View 1, active by default -->
  <div id="tab1" class="view tab active">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="center">View 1</div>
      </div>
    </div>
    <div class="pages navbar-fixed">
      <div data-page="home-1" class="page">
        <div class="page-content">
          <div class="content-block">
            <p>This is view 1</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Tab 2 - View 2 -->
  <div id="tab2" class="view tab">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="center">View 2</div>
      </div>
    </div>
    <div class="pages navbar-fixed">
      <div data-page="home-2" class="page">
        <div class="page-content">
          <div class="content-block">
            <p>This is view 2</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Tab 2 - View 3 -->
  <div id="tab3" class="view tab">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="center">View 3</div>
      </div>
    </div>
    <div class="pages navbar-fixed">
      <div data-page="home-3" class="page">
        <div class="page-content">
          <div class="content-block">
            <p>This is view 3</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Tab bar with tab links -->
  <div class="toolbar tabbar">
    <div class="toolbar-inner">
      <a href="#tab1" class="tab-link active"><i class="icon demo-icon-1"></i></a>
      <a href="#tab2" class="tab-link"><i class="icon demo-icon-2"></i></a>
      <a href="#tab3" class="tab-link"><i class="icon demo-icon-3"></i></a>
    </div>
  </div>
</div>

Animated Tabs

It is also possible to switch tabs with simple transition. This requires additional div class="tabs-animated-wrap" wrapper for div class="tabs":

<div class="navbar">
  <div class="navbar-inner">
    <div class="center">
      <!-- Buttons row as tabs controller in navbar-->
      <div class="buttons-row">
        <!-- Link to 1st tab, active -->
        <a href="#tab1" class="tab-link active button">Tab 1</a>
        <!-- Link to 2nd tab -->
        <a href="#tab2" class="tab-link button">Tab 2</a>
        <!-- Link to 3rd tab -->
        <a href="#tab3" class="tab-link button">Tab 3</a>
      </div>
    </div>
  </div>
</div>
<div class="pages">
  <div class="page">
    <div class="page-content">
      <!-- Tabs animated wrapper, required to switch tabs with transition -->
      <div class="tabs-animated-wrap">
        
        <!-- Tabs, tabs wrapper -->
        <div class="tabs">
          <!-- Tab 1, active by default -->
          <div id="tab1" class="tab active">
            ... Tab 1 content ...
          </div>
 
          <!-- Tab 2 -->
          <div id="tab2" class="tab">
            ... Tab 2 content ...
          </div>
 
          <!-- Tab 3 -->
          <div id="tab3" class="tab">
            ... Tab 3 content ...
          </div>       
        </div>
        
      </div> 
    </div>
  </div>
</div> 

Note that animted tabs wrapper (div class="tabs-animated-wrap") should be a fixed height. By default, it is 100% height of its parent

Swipeable Tabs

It is also possible to switch tabs with simple transition. This requires additional div class="tabs-swipeable-wrap" wrapper for div class="tabs".

In this example let's put tab links in Subnavbar and we will use page-content as tab to keep scrolling position for each tab separately:

<div class="pages navbar-fixed">
  <div data-page="home" class="page with-subnavbar">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="center">Swipeable Tabs</div>
        <div class="subnavbar">
          <!-- Buttons row as tabs controller in Subnavbar-->
          <div class="buttons-row">
            <!-- Link to 1st tab, active -->
            <a href="#tab1" class="button active tab-link">Tab 1</a>
            <!-- Link to 2nd tab -->
            <a href="#tab2" class="button tab-link">Tab 2</a>
            <!-- Link to 3rd tab -->
            <a href="#tab3" class="button tab-link">Tab 3</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Tabs swipeable wrapper, required to switch tabs with swipes -->
    <div class="tabs-swipeable-wrap">
      <!-- Tabs, tabs wrapper -->
      <div class="tabs">
        <!-- Tab 1, active by default -->
        <div id="tab1" class="page-content tab active">
          <div class="content-block">
            ... Tab 1 content ...
          </div>
        </div>
        <!-- Tab 2 -->
        <div id="tab2" class="page-content tab">
          <div class="content-block">
            ... Tab 2 content ...
          </div>
        </div>
        <!-- Tab 3 -->
        <div id="tab3" class="page-content tab">
          <div class="content-block">
            ... Tab 3 content ...
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Tabs JavaScript events

Tabs events could be very useful when you need to do something in JavaScript when some Tabs becomes active:

Event Target Description
tab:show Tab Element<div class="tab"> Event will be triggered when Tab becomes visible/active
tab:hide Tab Element<div class="tab"> Event will be triggered when Tab becomes invisible/inactive

var myApp = new Framework7();   
var $$ = Dom7;
 
$$('#tab1').on('tab:show', function () {
    myApp.alert('Tab 1 is visible');
});
 
$$('#tab2').on('tab:show', function () {
    myApp.alert('Tab 2 is visible');
});
 
$$('#tab3').on('tab:show', function () {
    myApp.alert('Tab 3 is visible');
});          

Show Tab using JavaScript

It is also possible to show tab (switch tabs) using JavaScript. We should call the following App method:

myApp.showTab(tab, animated)

  • tab - HTMLElement or string (with CSS Selector) of Tab to open. Requred
  • animated - boolean - Should it become visible with animation or not. Actual for animated and swipeable tabs. Optional.
  • This method returns true if tab has been changed, otherwise it returns false
<a href="#" class="show-tab-1">Show Tab 1</a>
<a href="#" class="show-tab-2">Show Tab 2</a>
<a href="#" class="show-tab-3">Show Tab 3</a>
var myApp = new Framework7();   
var $$ = Dom7;
 
$$('.show-tab-1').on('click', function () {
    myApp.showTab('#tab1');
});
$$('.show-tab-2').on('click', function () {
    myApp.showTab('#tab2');
});
$$('.show-tab-3').on('click', function () {
    myApp.showTab('#tab3');
});