ionic tab

Ionic tabs are horizontally arranged buttons or links used for switching between pages. They can contain a combination of text and icons, and are a popular navigation method on mobile devices.

The tab container below uses the tabs class, and each tab uses the tab-item class. By default, tabs are text-only and do not have icons.

Examples

<div class="tabs">
  <a class="tab-item">
    主页
  </a>
  <a class="tab-item">
    收藏
  </a>
  <a class="tab-item">
    设置
  </a>
</div>

By default, the tab color is the default color. You can set the following different color styles: tabs-default, tabs-light, tabs-stable, tabs-positive, tabs-calm, tabs-balanced, tabs-energized, tabs-assertive, tabs-royal, tabs-dark.

To hide the tab bar, you can use the tabs-item-hide class.

Icon Tabs

Adding the tabs-icon-only class after the tabs class will set tabs to display icons only.

<div class="tabs tabs-icon-only">
  <a class="tab-item">
    <i class="icon ion-home"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
  </a>
</div>

Top Icon + Text Tabs

Adding the tabs-icon-top class after the tabs class will set top icon + text tabs.

<div class="tabs tabs-icon-top">
  <a class="tab-item" href="../index.html">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item" href="../index.html">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item" href="../index.html">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

Left Icon + Text Tabs

Adding the tabs-icon-left class after the tabs class will set left icon + text tabs.

<div class="tabs tabs-icon-left">
  <a class="tab-item">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

Striped Style Tabs

You can add tabs-striped to an element with the tabs style class to achieve Android-style tabs. You can also add tabs-top to place the tabs at the top of the page.

Striped tab colors can be controlled with tabs-background-{color} and tabs-color-{color}. The {color} value can be: default, light, stable, positive, calm, balanced, energized, assertive, royal, or dark.

Note: If you want to set a header title on the tabs, you need to use the has-tabs-top class.

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="../index.html">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  <div class="tabs-striped tabs-color-assertive">
    <div class="tabs">
      <a class="tab-item active" href="../index.html">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>

The running effect is as follows:

Other Extensions

ionic CSS

ionic JavaScript