ionic tab (tab)

ionic tab (Tab) is horizontally aligned buttons or links to navigate between pages switch. It can contain a combination of text and icons on a mobile device is a popular method of navigation.

Use the following tabs tabs container classes, each tab using the tab-item class. By default, the tab is the text and no icon.

Examples

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

try it"

By default, the tab color is the default, 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 tabs-item-hide class.

Icon tab

After the class to add tabs tabs-icon-only classes can be set to display only the icon tab.

<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>

try it"

Top icon + text tab

After the class to add tabs tabs-icon-top class icon + text can be set at the top of the tab.

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

try it"

Left of the icon + text tab

After the class to add tabs tabs-icon-left icon on the left side of the class can be set to + text tab.

<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>

try it"

Striped Style tab

You can add tabs-striped pattern on the element name with tabs to achieve as Android style tabs. You can also add tabs-top to achieve the tab at the top of the page.

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

Note: If the head of the title on the tab again, 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="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <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="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>

try it"

Operating results are as follows: