ionic默认样式android和ios差异
ionicframework中android和ios在默认样式上有一些不同的地方,官方文档中都有说明,但是经常会想不起。
一、差异:
1.tab位置,$ionicConfigProvider, tabs.position(value)
Android 默认是顶部(top),Ios是底部 (bottom)
2.标题android默认靠左边,ios默认居中
navBar.alignTitle(value)
二:解决方案:
1.将Android的tab默认设置是底部显示:
修改app.js文件如下:
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) { //Modify the tabs of android display position! start$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard'); $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('left'); $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back'); $ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');
//Modify the tabs of android display position! end // Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js $stateProvider // setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
}) // Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
}) .state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
}) .state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
}); // if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash'); });
2.修改Android的title样式居中显示
给指令ion-header-bar设置align-title="center"属性就行了 //设置默认返回按钮的文字
$ionicConfigProvider.backButton.previousTitleText(false).text('返回');
// 设置全局 $http 超时
$httpProvider.interceptors.push('timeoutHttpIntercept');
// 配置选项卡,让tab在iOS和Android都显示在底部
$ionicConfigProvider.tabs.position('bottom');
$ionicConfigProvider.tabs.style('standard');
//让nav标题在iOS和Android上都居中显示
$ionicConfigProvider.navBar.alignTitle('center');
ionic默认样式android和ios差异的更多相关文章
- ionic默认样式android和ios的一些不同(当时真是纠结啊~)
当时测试的时候看到android和ios上有那么大差别,特别崩溃啊... 还好看到了这篇文章,文章原文是Ionicchina中文网上的:http://ionichina.com/topic/54e45 ...
- ios html5 网页取消默认样式
ios的的默认样式修改成扁平化的样式 重要的一句css -webkit-appearance: none; 将样式清除 单数会出现将raido的选择按钮也会消失 所以需要对radio的样式进行重新 ...
- Android使用默认样式创建View的几个姿势
以下内容是分析安卓源码所得: 1: 使用默认样式创建View的方式, 源码文件 Button.Java 注:此文参考http://www.linzenews.com/ 中的内容所写,如侵删! 2: ...
- 通过微信Android和iOS版,看两大系统的差异
由于设计师或者产品经理使用的移动设备大部分是iPhone,所以在做设计时,容易忽略Android和iOS的差异,按照自己的使用习惯进行设计,导致大部分设计师或产品经理做出的设计都是基于iOS规范或习惯 ...
- Android UI 统一修改Button控件的样式,以及其它系统控件的默认样式
先介绍下修改原理:首先打开位于android.widget包下面的Button.java文件,这里有一句关键的代码如下: public Button(Context context, Attribut ...
- 如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式?
Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根 ...
- ionic actionsheet在android下的样式问题
https://forum.ionicframework.com/t/actionsheets-android-ugly-styling-need-help/18462/10 想要修改ionic的样式 ...
- Android &Swift iOS开发:语言与框架对比
转载自:http://www.infoq.com/cn/articles/from-android-to-swift-ios?utm_campaign=rightbar_v2&utm_sour ...
- Mac下安装ionic和cordova,并生成iOS项目
为了开发HTML5,除了最新使用React Native等之外,目前首选的为稳定的ionic+Angularjs来开发iOS和android. Ionic(ionicframework一款接近原生的H ...
随机推荐
- Java - replace a character at a specific index in a string?
String are immutable in Java. You can't change them. You need to create a new string with the charac ...
- 高可用的MongoDB集群-实战篇
1.概述 最近有同学和网友私信我,问我MongoDB方面的问题:这里我整理一篇博客来赘述下MongoDB供大家学习参考,博客的目录内容如下: 基本操作 CRUD MapReduce 本篇文章是基于Mo ...
- 高可用Hadoop平台-探索
1.概述 上篇<高可用Hadoop平台-启航>博客已经让我们初步了解了Hadoop平台:接下来,我们对Hadoop做进一步的探索,一步一步的揭开Hadoop的神秘面纱.下面,我们开始赘述今 ...
- 利用Django构建web应用及其部署
注:很久之前就有了学习Django的想法,最近终于有机会做了一次尝试.由于Django的详细教程很多,我在这里就不再详述了,只是将整个开发流程以及自己在学习Django中的一些思考记录在此. Syst ...
- Vue.js基础拾遗
本篇目录: 模版语法 插值 指令 v-bind指令 v-on指令 计算属性与侦听器 计算属性VS方法 计算属性VS侦听属性 Class与Style绑定 绑定HTML Class 绑定内联样式 条件渲染 ...
- Maven 打包遇到的问题
[ERROR] No compiler is provided in this environment. Perhaps you are running on a JRE rather than a ...
- logstash-input-jdbc同时同步多个表
同步一个表,可以参考我的上一篇 logstash-jdbc-input与mysql数据库同步 同步多个表的做法,跟一个表类似,唯一不同的是 .conf 文件中的配置 在这里我加了一个脚本文件jdbc- ...
- Spring Boot项目的内嵌容器
一.关于容器 刚才开始使用spring boot的开发者会有种很直观的感觉,servlet容器“不见了”.之前开发web项目,都是把程序写完后部署到servlet容器(比如Tomcat),但是使用sp ...
- WPF中的Visual Tree和Logical Tree与路由事件
1.Visual Tree和Logical TreeLogical Tree:逻辑树,WPF中用户界面有一个对象树构建而成,这棵树叫做逻辑树,元素的声明分层结构形成了所谓的逻辑树!!Visual Tr ...
- postman环境变量 全局变量清理
一:主要内容 清除一个环境变量.全局变量 清除全部环境变量.全局变量 清除部分环境变量.全局变量 二:清除一个指定环境变量.全局变量 1. 清除一个环境变量,如清除用户名环境变量,username为变 ...