İyonik

Question

içinde başlık çubuğuna bir logo ekleme İyonik kullanarak başlık çubuğumun ortasına bir logo eklemeye çalışıyorum. Nasıl yapıldığına dair bir tavsiye var mı?

İşte benim kod

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

Answer 1

Nasıl böyle bir şey yaptığını hakkında:

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

Siz de bu plunker bir göz olabilir.

Bazı ek bilgiler, forum.

Answer 2

Sadece izleyerek bu yapmış: iyon

şablonumun <ion-view title="{{pageTitle}}">

içinde ve bir gez çubuğu kullandığınızı düşünürsek benim denetleyicisi $scope.pageTitle = "<img src=\"img/logo-290-90.png\">";

Answer 3

yılında, sen kullanmalıdır nav-başlığı. İşte bir örnek:

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

Answer 4

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

Değişim zevkinize göre görüntü yüksekliği ve src. :)

Answer 5

İstediğiniz resmi uygulamanızda "www/img" klasörüne koyun.

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

aşağıdaki direktifi anahtarıdır: da yapılabilir aşağıdaki

<h1 class="title"><img class="title-image" src="img/mylogo.png" width="123" height="43" /></h1> 

Answer 6

Sonra index.html içinde aşağıdaki kodu kullanmak

<ion-nav-title>