导航栏(Header)和(Footer)的使用简介
2015-12-09 17:56
585 查看
Header
Header是固定在屏幕顶部的组件。可以包含如标题和左右的功能按钮。如:
[code]<ion-view> <div class="bar bar-header"> <button class="button icon ion-navicon"></button> <h1 class="title">Header Buttons</h1> <button class="button">Reorder</button> </div> </ion-view>
Sub Header同样是固定在顶部,只是是在Header的下面,就算没有写Header这个,Sub Header这个样式也会距离顶部有一个Header的距离。
[code]<div class="bar bar-subheader"> <h2 class="title">Sub Header</h2> <a href="#/app/playlists" class="button button-icon icon ion-ios7-undo-outline"></a> <a href="#/app/capture" class="button button-icon icon ion-ios7-redo-outline"></a> </div>
Footer
是显示在屏幕底部的边栏,你可以用这个做导航栏或者添加一些菜单操作,示例如下:[code]<div class="bar bar-footer bar-balanced"> <button class="button button-clear">Left</button> <button class="button button-clear">Right</button> </div>
相关文章推荐
- 继承
- linux shell脚本查找重复行/查找非重复行/去除重复行/重复行统计
- mysql基础——启动篇
- OCP-1Z0-051-2015-45题
- 工作总结20151209
- android - open failed: EROFS (Read-only file system)
- zip,jar,tar.gz无需解压读取文件内容
- iOS封装静态库,也就是.a文件
- TSql Merge On子句和When not matched 语义理解
- Excel中如何提取字符串中的数字
- Eclipse中Maven工程缺少Maven Dependencies
- yun install gcc 报错 Loaded plugins: fastestmirror, refresh-packagekit, security
- 静态库与动态库介绍(.a库资源处理需验证补充)
- 我的Android进阶之旅------>android Button上面的英文字符串自动大写的问题解决
- Cocos2D-Android-1之源码详解:6.ClickAndMoveTest
- 直接操作USRP属性树
- IIS日志文件清理
- Highcharts candlestick(K线图)案例
- matlab 实践程序5——批量将图片转移文件夹
- C#的Task多线程编程