ion-nav-bar
作者:本站编辑 发布时间:2015-11-24 来源:本站原创
点击数:
如果我们有一个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中，此外它有导航栏的所有功能。
如果你这样做，只需把导航按钮放在导航栏里面；而不需要用<ion-nav-buttons>。
<ion-nav-bar> <ion-nav-back-button> 返回 </ion-nav-back-button> <div class="buttons right-buttons"> <button> 右侧按钮 </button> </div> </ion-nav-bar> <ion-view title="我的标题"> </ion-view>