ionic 隐藏头部移动信息头怎么处理

来源：蜘蛛抓取(WebSpider) 时间：2016-12-13 08:00 标签： ionic 摄像头
您的位置：
& ionic JavaScript
ionic 头部和底部
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&
&h1 class="title"&Title!&/h1&
&div class="buttons"&
&button class="button"&Right Button&/button&
&/ion-header-bar&
&ion-content&
Some content!
&/ion-content&
属性 类型 描述
align-title (optional)
这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
no-tap-scroll (optional)
这个是设置 header-bar 是否跟随着内容的滚动而滚动，就是是否固定在顶部。它的值是布尔值（true/false）。
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&
&h1 class="title"&Title!&/h1&
&div class="buttons" ng-click="doSomething()"&
&button class="button"&Right Button&/button&
&/ion-footer-bar&
与 ion-header-bar 不同的是，ion-footer-bar 只有 align-title 这个 API。
属性 类型 描述
align-title (optional)
这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
本站部份内容来源自网络，文字、素材、图片版权属于原作者，本站转载素材仅供大家欣赏和分享，切勿做为商业目的使用。如有侵权请联系：QQ
Copyright (C)
All Rights Reserved.
网站备案号：主题信息（必填）
主题描述（最多限制在50个字符）
申请人信息（必填）
申请信息已提交审核，请注意查收邮件，我们会尽快给您反馈。
如有疑问，请联系
一只文艺范的软件攻城狮，Keep Learn，Always.
本人热爱编程，有着很强的兴趣，做事认真
Ionic 让你一见钟情的移动App开发框架一】、ionic了解：是什么？1.强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )2.构建接近原生体验的移动应用程序。3.注重外观、体验、交互4.轻量、速度快5.不支持IOS6和Android4.1以下的版本
特点：1.基于Angular语法2.轻量级、简单3.融合下一代移动框架，支持Angular.js特性，MVC，代码易维护4.漂亮、SASS、UI组件多5.原生性强6.ionic提供了强大的命令行工具7.性能优越，运行速度快
ionic下载、安装：/docs/overview/#download或者Github下载源文件：/driftyco/ionic
//命令行安装：npm config --global set registry pmjs.orgnpm install -g cordova inoic
只需要在项目中引入 css/ionic.min.css 和 js/ionic.bundle.min.js 和 fonts 即可创建 ionic 应用
我的第一个ionic应用：
1 &!DOCTYPE html&
2 &html lang="zh-cn"&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-
7 scale=1,maximum-scale=1,user-scalable=no"/&
&title&ionic应用&/title&
&link rel="stylesheet" href="css/ionic.min.css"/&
10 &/head&
11 &body ng-app="ionicApp" ng-controller="MyCtrl"&
13 &ion-header-bar class="bar-positive"&
&h1 class="title"&Hello World!&/h1&
15 &/ion-header-bar&
17 &ion-content&
&p&我的第一个ionic应用&/p&
19 &/ion-content&
21 &script src="js/ionic.bundle.min.js"&&/script&
22 &script&
//['']中引入依赖的模块，这里引入ionic
var myIonic = angular.module('ionicApp', ['ionic']);
myIonic.controller('MyCtrl', function ($scope) {
28 &/script&
30 &/body&
31 &/html&
//命令行创建应用：ionic start myApp tabs
二】、头部、底部、副标题header头部div.bar.bar-header.bar-light&h1.titile
ionic提供的默认颜色样式：.bar-light 白色 默认.bar-stable 浅灰色.bar-positive 蓝色.bar-calm 亮蓝色.bar-balanced 绿色.bar-energized 橙色.bar-assertive 红色.bar-royal 紫色.bar-dark 黑色
subheader副标题
.bar.bar-subheader
footer底部div.bar-footer位于网页底部
1 &!DOCTYPE html&
2 &html lang="zh-cn"&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/&
&title&ionic应用&/title&
&link rel="stylesheet" href="css/ionic.min.css"/&
11 &div class="bar bar-header"&
&h1 class="title"&bar-light&/h1&&!--title是ionic内置的样式--&
14 &div class="bar bar-subheader"&
&h1 class="title"&subheader&/h1&
18 &!--&div class="bar bar-footer bar-balanced"&
&button class="button button-clear"&Left&/button&
&div class="title"&footer&/div&
&button class="button button-clear"&Right&/button&
22 &/div&--&
24 &div class="bar bar-footer"&
&button class="button button-clear pull-right"&Right&/button&
28 &script src="js/ionic.bundle.min.js"&&/script&
30 &/body&
31 &/html&
阅读(...) 评论()

我要回帖

更多关于 ionic 摄像头 的文章

 

随机推荐