ion-tabs
关联: $ionicTabsDelegate

See the Pen by Ionic (@ionic) on CodePen.

ion-tabs是由一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。

应用tabs class给元素定义它的外观。

对于iOS它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航栏下面)。这是操作系统的默认设计规范,你可以通过配置$ionicConfigProvider改变它。

了解一个标签的更多细节,请看ionTab

注意:不要将ion-tabs放在ion-content内部,否则它将导致一个CSS错误。

实例该文档来自ionic中文网ionic-china

<ion-tabs class="tabs-positive tabs-icon-only">

  <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
    <!-- 标签 1 内容 -->
  </ion-tab>

  <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
    <!-- 标签 2 内容 -->
  </ion-tab>

  <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
    <!-- 标签 3 内容 -->
  </ion-tab>

</ion-tabs>

API

属性 类型 说明
delegate-handle
(可空)
string

该句柄用(ionic-china中文网文档)$ionicTabsDelegate来标识这些选项卡