ion-nav-bar

授权: $ionicNavBarDelegate

如果我们有一个ionNavView指令，我们也可以创建一个<ion-nav-bar>，它会创建一个顶部工具栏，当程序状态改变时更新。

我们在里面放入一个ionNavBackButton来添加一个后退按钮。

用ionNavButtons根据当前可用的视图添加按钮。

在一个元素上指定一个动画类，来启用更换标题的动画（建议: 'nav-title-slide-ios7'）

用法

<body ng-app="starter">
  <!-- 当我们浏览时，导航栏会随之更新。 -->
  <ion-nav-bar class="bar-positive nav-title-slide-ios7">
  </ion-nav-bar>

  <!-- 初始化时渲染视图模板 -->
  <ion-nav-view></ion-nav-view>
</body>

API

属性 类型 详情
delegate-handle(可选) 字符串 该句柄用$ionicNavBarDelegate标识此导航栏。
align-title(可选) 字符串 导航栏标题对齐的位置。可用： 'left', 'right', 'center'。 默认为 'center'。

其他用法

除此之外，你可以将ion-nav-bar放到每个单独视图的ion-view元素里面。它允许你把整个导航栏，而不仅是它的内容，改变每个视图的过渡。

这类似于把header栏嵌入到你的ion-view中，此外它有导航栏的所有功能。

如果你这样做，只需把导航按钮放在导航栏里面；而不需要用&lt;ion-nav-buttons&gt;。

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
    返回
  </ion-nav-back-button>
  <div class="buttons right-buttons">
    <button class="button">
      右侧按钮
    </button>
  </div>
</ion-nav-bar>
<ion-view title="我的标题">
</ion-view>

改进该文档