1.ion-header-bar

这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader' 这个样式,它就是副标题。

<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content>
Some content!
</ion-content>

2.ion-footer-bar

知道了 ion-header-bar ,理解ion-footer-bar就轻松多啦!只是 ion-footer-bar 是在屏幕的底部。

<ion-content>
Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>

Ionic Js八:头部和底部的更多相关文章

  1. ionic-CSS:ionic 头部与底部

    ylbtech-ionic-CSS:ionic 头部与底部 1.返回顶部 1. ionic 头部与底部 Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮. ion ...

  2. HTML5 开发APP(头部和底部选项卡)

    我们开发app有一定固定的样式,比如头部和底部选项卡部分就是公共部分就比如我在做的app进来的主页面就像图片显示的那样 我们该怎么实现呢,实现我们应该建一个主页面index.html,然后建五个子页面 ...

  3. ionic js ion-tabs选项卡栏操作

    ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航 ...

  4. html 如何引入一个公共的头部和底部

    2016-01-08 作者案:尽己之力,用心打造一个商城!当你有十二分力气时,发现用了十分力气依旧没什么进展,请不要放弃希望:或许你想得到的东西正在十二分力气的地方等你:假若你用尽了十二分力气,还是没 ...

  5. vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏

    vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

  6. RecyclerView--添加头部和底部

    1.先构建WrapRecyclerAdapter /** * Description: 可以添加头部和底部的Adapter */ public class WrapRecyclerAdapter ex ...

  7. Ionic Js十一:模态

    ionicModal 可以遮住用户主界面的内容框. 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变). <script id=" ...

  8. Ionic Js十:加载动作

    $ionicLoading 是 ionic 默认的一个加载交互效果.里面的内容也是可以在模板里面修改. 用法 angular.module('LoadingApp', ['ionic']) .cont ...

  9. Ionic Js九:列表操作

    列表是一个应用广泛在几乎所有移动app中的界面元素.ionList 和 ionItem 这两个指令还支持多种多样的交互模式,比如移除其中的某一项,拖动重新排序,滑动编辑等等. <ion-list ...

随机推荐

  1. charles抓包详解http 与 https

    包工具多种多样,比较好使的还是Charles和Fiddler,下面就简单的介绍下HTTPS的相关原理并以Charles为例来介绍下如何抓取HTTPS协议的包 1.下载charles 可以去charle ...

  2. Spring Cloud(十一)声名式服务调用:Feign的使用 (上)

    一.写在前边 最近开发任务比较忙,下班也开始锻炼了,这个系列的文章就放了很久,看github我提交的Feign的入门程序已经好久了,今天正好得空,这就更上一贴,准备分几部分写 注意:之前几个项目中,笔 ...

  3. openwrt的sysupgrade和factory固件的区别

    openwrt的固件一般分两种类型:factory原厂固件.sysupgrade固件 factory多了一些验证的东西,用于在原厂固件的基础上进行升级. 普通家用路由一般不是openwrt固件,如果要 ...

  4. LintCode 407: Plus One

    LintCode 407: Plus One 题目描述 给定一个非负数,表示一个数字数组,在该数的基础上+1,返回一个新的数组. 该数字按照位权大小进行排列,位权最大的数在列表的最前面. 样例 给定 ...

  5. 20155217 2016-2017-2 《Java程序设计》第4周学习总结

    20155217 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 在java中,继承时使用extends关键字,private成员也会被继承,只不过子 ...

  6. STL-map and multimap

    定义 map<int,int> a; map<int,string> a; map<double,int> a; …… 首先要知道的一些 Map是STL的一个关联容 ...

  7. 调整扩大VMDK格式VirtualBox磁盘空间

    如果虚拟机的格式是VDI格式的, 那么可以通过这篇文章来调整磁盘大小: 调整Virtual Box硬盘大小 不过楼主当初在创建虚拟机的时候,是用的VMDK格式, 以求与VMWare的兼容性.这时候要扩 ...

  8. 动态获取UILabel的bounds

    在使用UILabel存放字符串时,经常需要获取label的长宽数据,本文列出了部分常用的计算方法. 1.获取宽度,获取字符串不折行单行显示时所需要的长度 CGSize labelBounds = [s ...

  9. PHP 生成、识别二维码及安装相关扩展/工具

    2018-02-20 00:30:26  更新:推荐新扩展(极力推荐) 这篇文章里用的两个二维码扩展都有些问题和麻烦:phpqrcode(生成二维码)的源码有点小 bug: 而 php-zbarcod ...

  10. APUE-文件和目录(二)函数access,mask,chmod和粘着位

    4.7 函数access和faccessat 当一个进程使用了设置用户ID和设置组ID作为另一个用户(或者组)运行时,这时候有效用户(组)ID和实际用户(组)ID不一样,但进程仍然希望测试实际用户(组 ...