The best ionic tab (tab) Tutorial In 2024, In this tutorial you can learn ionic tab (tab)

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>

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>

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>

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>

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>

Operating results are as follows: