Ionic Js八:头部和底部
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八:头部和底部的更多相关文章
- ionic-CSS:ionic 头部与底部
ylbtech-ionic-CSS:ionic 头部与底部 1.返回顶部 1. ionic 头部与底部 Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮. ion ...
- HTML5 开发APP(头部和底部选项卡)
我们开发app有一定固定的样式,比如头部和底部选项卡部分就是公共部分就比如我在做的app进来的主页面就像图片显示的那样 我们该怎么实现呢,实现我们应该建一个主页面index.html,然后建五个子页面 ...
- ionic js ion-tabs选项卡栏操作
ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航 ...
- html 如何引入一个公共的头部和底部
2016-01-08 作者案:尽己之力,用心打造一个商城!当你有十二分力气时,发现用了十分力气依旧没什么进展,请不要放弃希望:或许你想得到的东西正在十二分力气的地方等你:假若你用尽了十二分力气,还是没 ...
- vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏
vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...
- RecyclerView--添加头部和底部
1.先构建WrapRecyclerAdapter /** * Description: 可以添加头部和底部的Adapter */ public class WrapRecyclerAdapter ex ...
- Ionic Js十一:模态
ionicModal 可以遮住用户主界面的内容框. 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变). <script id=" ...
- Ionic Js十:加载动作
$ionicLoading 是 ionic 默认的一个加载交互效果.里面的内容也是可以在模板里面修改. 用法 angular.module('LoadingApp', ['ionic']) .cont ...
- Ionic Js九:列表操作
列表是一个应用广泛在几乎所有移动app中的界面元素.ionList 和 ionItem 这两个指令还支持多种多样的交互模式,比如移除其中的某一项,拖动重新排序,滑动编辑等等. <ion-list ...
随机推荐
- bzoj千题计划131:bzoj3993: [SDOI2015]星际战争
http://www.lydsy.com/JudgeOnline/problem.php?id=3993 二分答案 源点向武器连 mid*攻击力的边 机器人向汇点连 防御力 的边 武器i能攻击机器人j ...
- SQL语句(十九)——存储过程(练习)
select * From Student select * From Course select * from SC --INSERT INTO SC (Sno, Cno, Grade) --VAL ...
- MongoDB - MongoDB CRUD Operations, Bulk Write Operations
Overview MongoDB provides clients the ability to perform write operations in bulk. Bulk write operat ...
- asp.net(C#)中 DataTime 赋空值的研究
SqlServer中的datetime类型的空值和c#中的DateTime的空值的研究 在SqlServer 2000中datetime 的空值即默认值为1900-01-01 00:00:00,C#中 ...
- TensorFlow在windows10上的安装与使用(一)
随着近两年tensorflow越来越火,在一台新win10系统上装tensorflow并记录安装过程.华硕最近的 Geforce 940mx的机子. TensorFlow是一个采用数据流图(data ...
- Informatica学习:2、配置存储库服务和集成服务
继续上一篇的1.安装介质的获取与安装,本文介绍服务端的存储库服务和集成服务的配置. 安装好Informatica的客户端和服务端后,需要登陆Administration Console,配置存储库服务 ...
- 文件读取 FILE
需要了解的概念 [数据流][缓冲区(Buffer)][文件类型][文件存取方式][借助文件指针读写文件] 需要理解的知识点包括:数据流.缓冲区.文件类型.文件存取方式 1.1 数据流: 指程序与数据的 ...
- 图片懒加载之lazyload.js插件使用
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 使用 lazyload依赖与jquery.所以先引入jquery和lazyl ...
- makefile特殊符号介绍
http://blog.chinaunix.net/uid-20564848-id-217918.html makefile下$(wildcard $^),$^,$@,$?,$<,$(@D),$ ...
- 使用html+css+js实现日历与定时器,看看今天的日期和今天剩余的时间。
使用html+css+js实现日历与定时器,看看今天的日期和今天剩余的时间. 效果图: 哎,今天就又这么过去了,过的可真快 . 代码如下,复制即可使用: <!DOCTYPE html> & ...