Ionic(ionicframework)一款接近原生的Html5移动App开发框架 创建精彩的应用 从这里开始 -ion-header-bar
漂亮的界面 追求性能 专注原生 免费开源
-
ionic/ionic3
JavaScript 扩展 - Headers/Footers(页眉页脚) 1
- Content(内容) 2
- Scroll(滚动) 3
- Tabs(选项卡) 4
- Side Menus(侧栏菜单) 5
- Navigation(导航) 6
- Lists(列表) 7
- Form Inputs(表单) 8
- Slide Box(滑动框) 9
- Modal(模型) 10
- Action Sheet(操作表) 11
- Popup(弹出窗口) 12
- Loading(加载) 13
- Platform(平台) 14
- Gesture(手势) 15
- Backdrop(背景) 16
- Utility(工具) 17
- Keyboard(键盘) 18
ion-header-bar
在内容顶部添加一个固定header栏。
如果应用'bar-subheader'类,就可以成为一个subheader(在下面)。 查看header CSS文档。
用法
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">左侧按钮</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">右侧按钮</button>
</div>
</ion-header-bar>
<ion-content>
一些内容!
</ion-content>
API
属性 | 类型 | 详情 |
---|---|---|
align-title
(可选)
|
字符串
|
标题对齐的位置。可用: 'left', 'right', or 'center'。默认为 'center'。 |