ion-nav-bar

来源：互联网发布：淘宝卖家地址是真的吗编辑：程序博客网时间：2024/05/17 03:33

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

我们在里面放入一个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中，此外它有导航栏的所有功能。

如果你这样做，只需把导航按钮放在导航栏里面；而不需要用。

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

阅读全文

0 0