Ionicを使用してヘッダーバーの中央にロゴを追加しようとしています。それを行う方法に関するアドバイスはありますか?
ここに私のコードがあります
<ion-nav-bar class="bar-light">
<!--Logo-->
<ion-nav-buttons >
<img class="title" src="https://s3-us-west 2.amazonaws.com/s.cdpn.io/139144/sp_symbol_option2_1.png">
</ion-nav-buttons>
<ion-nav-buttons side="left">
<!--Left icons-->
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
</button></ion-nav-bar>
このようなことをしてはどうですか:
<ion-header-bar align-title="center" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title"><img class="title-image" src="http://www.ionicframework.com/img/ionic-logo-white.svg" width="123" height="43" /></h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
これを見ることができます plunker も。
フォーラム の追加情報。
私はこれを次のように単純に行いました。
私のテンプレート<ion-view title="{{pageTitle}}">
そして私のコントローラーで$scope.pageTitle = "<img src=\"img/logo-290-90.png\">";
ナビゲーションバーを使用していることを考慮すると、ion-nav-titleを使用する必要があります。以下に例を示します。
<ion-nav-bar align-title="center">
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-title>
<img src="logo.svg">
</ion-nav-title>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
アプリの「www/img」フォルダーに目的の画像を入れます。次に、index.htmlで以下のコードを使用します
<h1 class="title"><img class="title-image" src="img/mylogo.png" width="123" height="43" /></h1>
<ion-view>
<ion-nav-title>
<img alt="Company Logo1" height="40" src="img/logo-07.png">
<img alt="Company Logo2" height="40" src="img/logo-08.png">
</ion-nav-title>
</ion-view>
好みに応じて画像の高さとsrcを変更します。 :)
以下も実行できます。
<ion-view id = "yourHeader">
<ion-nav-title>
<div id = "title">YOUR TITLE</div>
<img src="img/Message.png" class = "peers_msg_img">
<img src="img/Notification.png" class="peers_profile_img">
<img src="img/Peers.png" class="peers_alert_img">
</ion-nav-title>
<ion-content>
//Some Content
</ion-content>
</ion-view>
次のディレクティブが重要です。
<ion-nav-title>