离子导航栏:标题不以Android设备为中心
Mul*_*ard 26 ionic-framework ionic
我对Ionic很新,但我已经喜欢了.我想使用nav-bar所以我实现了以下index.html:
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!-- Ionic -->
<link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.css">
<script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>
<!-- myApp -->
<link rel="stylesheet" type="text/css" href="css/general.css">
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/factory.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
在我的app.js中配置路径:
var myApp = angular.module('myApp', ['ionic']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('index', {
url: '/',
templateUrl: 'views/home.html'
}).state('prints', {
url: '/prints',
templateUrl: 'views/photo_prints.html'
}).state('box', {
url: '/box',
templateUrl: 'views/photo_box.html'
});
$urlRouterProvider.otherwise("/");
});
还有一个示例页面:
<ion-view view-title="Home">
<ion-content ng-controller="HomeController">
<a href="#/prints">Prints</a></br></br>
<a href="#/box">Box</a></br></br>
</ion-content>
</ion-view>
当我在我的电脑上的谷歌浏览器浏览器中测试一切时,一切看起来都应该如此.标题居中.
当我现在在我的Android设备上测试它(我也应该使用谷歌浏览器),我得到以下结果:
如您所见,标题不居中.我该如何解决这个问题？不幸的是我没有其他设备来测试它.
San*_*suf 45
按设计,Android标题左对齐.我相信更改此行为的正确方法是在主角度模块的angular .config方法中使用$ ionicConfigProvider .此提供程序具有属性navBar.alignTitle(value),其中"value"可以是platform(默认),left,right或center.这是在文档中描述这里
例如
var myApp = angular.module('reallyCoolApp', ['ionic']);
myApp.config(function($ionicConfigProvider) {
// note that you can also chain configs
$ionicConfigProvider.navBar.alignTitle('center');
});
这在我看来是覆盖此行为的正确方法.
- 这是正确的方法!这应该是IMO接受的答案. (5认同)
小智 37
尝试align-title="center"在离子导航栏中添加属性
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
- 我认为实现这一目标的正确方法是使用$ ionConfig全局覆盖行为,而是在特殊情况下使用该方法.这样你就不必在每个视图上使用align-title,并且可以将它抽象出来. (2认同)
我认为这是一个更好的图像解决方案.将其添加到app.scss
.back-button {
z-index: 100;
}
ion-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
我为Ionic 2.0.x编写了一个修复程序
将以下样式添加到.scss文件中(我将其放在app.scss中)
// Centering title
// --------------------------------------------------
// a fix for centering the title on all the platforms
ion-header {
.button-md {
box-shadow: none;
}
.toolbar-title {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
}
之后,将以下标记添加到您的页面
<ion-header>
<!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
<ion-toolbar>
<ion-buttons left>
<!-- left aligned content here -->
</ion-buttons>
<ion-title>
Your title or image
</ion-title>
<ion-buttons right>
<!-- left aligned content here -->
</ion-buttons>
</ion-toolbar>
</ion-header>
| 归档时间： |
|
| 查看次数： |
29694 次 |
| 最近记录： |