web-dev-qa-db-fra.com

comment ajouter un logo à header -bar in ionic

J'essaie d'ajouter un logo au centre de la barre d'en-tête en utilisant Ionic. Un conseil sur la façon de le faire?

Voici mon code

<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>
ionic-framework
15
Sage

Pourquoi ne pas faire quelque chose comme ça:

<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>

Vous pouvez aussi regarder ceci plunker . 

Quelques informations supplémentaires dans leur forum .

21
LeftyX

Je l'ai fait simplement par ce qui suit:

Dans mon modèle <ion-view title="{{pageTitle}}">

et dans mon contrôleur $scope.pageTitle = "<img src=\"img/logo-290-90.png\">";

5
SM3RKY

Étant donné que vous utilisez une barre de navigation, vous devez utiliser ion-nav-title . Voici un exemple:

<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>
3
Enrique Oriol

Placez l'image souhaitée dans le dossier "www/img" de votre application. Ensuite, utilisez le code ci-dessousin index.html

<h1 class="title"><img class="title-image" src="img/mylogo.png" width="123" height="43" /></h1>
2
Sanketh T
<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>

Modifiez la hauteur et le src de l’image selon vos goûts. :)

2
Abhijit

Ce qui suit peut aussi être fait:

<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>

La directive suivante est la clé:

<ion-nav-title>
0
Pritam Banerjee