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. codevs 3152 装箱问题3

    装箱问题3 http://codevs.cn/problem/3152/ 题目描述 Description 设有n种物品,记作A1.A2.….An,对应于每个Ai(1<=i<=n)都有一个 ...

  2. python学习笔记3--set

    #int string list tuple dict bool float set #集合:天生去重 s=set() #空的集合 s2={'} ls=[1,2,3,4,5,6,7,1,2,3,4] ...

  3. 全链路追踪traceId,ThreadLocal与ExecutorService

    关于全链路追踪traceId遇到线程池的问题,做过架构的估计都遇到过,现在以写个demo,总体思想就是获取父线程traceId,给子线程,子线程用完移除掉. mac上的chrome时不时崩溃,写了一大 ...

  4. AspNetPager + GridView + ASP.NET AJAX 分页无刷新实现

    准备资源: AspNetPager 下载网址:http://www.webdiyer.com/download/default.aspx ASP.NET AJAX  下载网址:http://www.a ...

  5. python初步学习-Python模块之 re

    re 正则表达式 python正则表达式在线检验网站 python re正则表达式语法 匹配字符 语法 解释 表达式 匹配实例 . 匹配任意除"\n"以外的任何字符 a.c abc ...

  6. 【译】第八篇 Integration Services:高级工作流管理

    本篇文章是Integration Services系列的第八篇,详细内容请参考原文. 简介在前面两篇文章,我们创建了一个新的SSIS包,学习了SSIS中的脚本任务和优先约束,并检查包的MaxConcu ...

  7. MUI项目基础框架

    码云SVN仓库地址:https://gitee.com/lim2018/vx/tree/master MUI项目基础框架,底部导航栏切换 目录结构 index为入口页主体,sub1-4为要切换的子页面 ...

  8. go 数组

    数组的定义和 初始化 数组是同一类型的元素集合 ]int //定义⼀个数组 Go中数组下标从0开始,因此长度为n的数组下标范围:[0,n-1] 整数数组中的元素默认初始化为0,字符串数组中的元素默认初 ...

  9. verilog中wire与reg类型的区别

    每次写verilog代码时都会考虑把一个变量是设置为wire类型还是reg类型,因此把网上找到的一些关于这方面的资料整理了一下,方便以后查找. wire表示直通,即只要输入有变化,输出马上无条件地反映 ...

  10. linux系统时钟和硬件时钟不一致

    在做DB2 集群复制的时候要求两台主机时间相互一致. 但是在一台主机上系统时间和硬件时间相差12个小时左右:手动同步后,重启后又相差12个小时左右. 为什么会是这样的,先介绍下系统时钟和硬件时钟的区别 ...