Tabs

Tabs make it easy to explore and switch between different views. Tab contents can be swipeable with a horizontal finger gesture. They are located at the top or bottom of the screen

We used/forked a tiny library called dragend.js to support gestures.

Live Example

Usage

Installation

Link to the CSS file if you loaded phonon-base.css only:

<link rel="stylesheet" href="tabs.css">

Link to the JS file if you loaded phonon-core.js only:

<script src="tabs.js"></script>

HTML

Header Tabs

Page example with a header-bar and a header-tabs.

<pagesample data-page="true">
    <header class="header-bar">
        <div class="center">
        <h1 class="title">Tabs <span class="tab-number">1</span></h1>
        </div>
    </header>
    <nav class="tabs header-tabs">
        <div class="tab-items">
            <a class="tab-item" >Home</a>
            <a class="tab-item" ><i class="icon icon-edit"></i></a>
            <a class="tab-item icon-text" ><i class="icon icon-settings"></i>Tab name</a>
        </div>
        <div class="tab-indicator"></div>
    </nav>
    <div class="content" data-tab-contents="true" data-disable-swipe="false" data-tab-default="1" >
        <div class="tab-content">
            <div class="padded-full">
                <h1>Tab 1</h1>
                <p>Swipe me!</p>
            </div>
        </div>
        <div class="tab-content">
            <div class="padded-full">
                <h1>Tab 2</h1>
                <p>Swipe me!</p>
            </div>
        </div>
        <div class="tab-content">
            <div class="padded-full">
                <h1>Tab 3</h1>
                <p>Swipe me!</p>
            </div>
        </div>
    </div>
</pagesample>

Footer Tabs

Page example with a header-bar and bottom tabs. The difference is that you need to remove the class .header-tabs and to put the tab-indicator before tabs.

<pagesample data-page="true">
    <header class="header-bar">
        <div class="center">
        <h1 class="title">Tabs <span class="tab-number">1</span></h1>
        </div>
    </header>
    <nav class="tabs">
        <div class="tab-indicator"></div>
        <div class="tab-items">
            <a class="tab-item" >Home</a>
            <a class="tab-item" ><i class="icon icon-edit"></i></a>
            <a class="tab-item icon-text" ><i class="icon icon-settings"></i>Tab name</a>
        </div>
    </nav>
    <div class="content" data-tab-contents="true" data-disable-swipe="false" data-tab-default="1" >
        <div class="tab-content">
            <div class="padded-full">
                <h1>Tab 1</h1>
                <p>Swipe me!</p>
            </div>
        </div>
        <div class="tab-content">
            <div class="padded-full">
                <h1>Tab 2</h1>
                <p>Swipe me!</p>
            </div>
        </div>
        <div class="tab-content">
            <div class="padded-full">
                <h1>Tab 3</h1>
                <p>Swipe me!</p>
            </div>
        </div>
    </div>
</pagesample>

HTML options

Enable/Disable Swipe gestures

Edit the value of the attribute data-disable-swipe. This attribute is used with the class .content

Set the default tab

Edit the value of the attribute data-tab-default="tabNumber".

JavaScript API

Change the current tab programatically

var tabNumber = 2;
phonon.tab().setCurrentTab('pageName', tabNumber);

Setup tabs dynamically

This is useful if you render a template which contains tabs. This function will add tabs of the current page dynamically.

phonon.tab().init();

You can also pass the page name if you want to add tabs for a different page.

phonon.tab().init('pagename');

Phonon Framework

Phonon