Ionicに非常に新しいですが、すでに気に入っています。nav-bar
so次の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("/");
});
そして、1つのサンプルページ:
<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>
私のグーグルですべてをテストすると、chrome私のパソコンのブラウザはすべて正常に見えるはずです。タイトルは中央にあります。
私のAndroidデバイス(これもgoogle chrome私が知っているように使用する必要があります)でテストすると、次の結果が得られます。
ご覧のとおり、タイトルは中央に配置されていません。どうすれば修正できますか?残念ながら、他にテストするデバイスはありません。
Ion_nav-barにalign-title="center"
属性を追加してみてください
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
設計上Androidタイトルは左に揃えられています。この動作を変更する正しい方法は、angular。configメインのメソッドangularモジュール。このプロバイダーには、「value」をプラットフォームにすることができるnavBar.alignTitle(value)プロパティがあります。 (デフォルト)、左、右、または中央。これについては、ドキュメントで説明されています ここ
例えば
var myApp = angular.module('reallyCoolApp', ['ionic']);
myApp.config(function($ionicConfigProvider) {
// note that you can also chain configs
$ionicConfigProvider.navBar.alignTitle('center');
});
私の意見では、これはこの動作を無効にする正しい方法です。
これは画像のより良い解決策だと思います。 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>
上記の回答で述べたように、単に$ionicConfigProvider.navBar.alignTitle('center');
を使用して、すべてのビュータイトルのセンタリング動作をオーバーライドできます。または、他のビューでビュータイトルの位置を変更する必要がある場合は、タイトルの周りのcenter
HTMLタグを使用するだけです。ここでデモを見ることができます Ionic Title
<ion-header >
<div align="center">
<ion-navbar>
<ion-title primary>Tittle</ion-title>
</ion-navbar>
</div>
</ion-header>
<ion-view>
<ion-nav-title class="title">Login
</ion-nav-title>
<ion-content>
</ion-content>
こんにちは私はCSSを変更し、このようにCSSを再定義しています
.bar.bar-header .button+.title {
text-align: center !important;
left: 35px;
line-height: 46px;
}
私の仕事。
ここにリストされたソリューションの多くを試しましたが、ネイティブAndroidビルドで次の2つの問題がありました:
次のCSSは、これらの問題の両方を解決しました。
.platform-Android .bar .title {
line-height: 52px !important; // vertically centers title on native Android builds
}
.bar .title {
position: absolute;
left: 0px !important;
right: 0px !important;
width: 100%;
text-align: center !important;
margin-left: 0px !important;
margin-right: 0px !important;
}