【问题标题】:how to add a logo to header -bar in ionic如何在 ionic 中向标题栏添加徽标
【发布时间】:2014-06-12 13:59:37
【问题描述】:

我正在尝试使用 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>

【问题讨论】:

    标签: ionic-framework


    【解决方案1】:

    做这样的事情怎么样:

    <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

    他们的forum 中有一些额外信息。

    【讨论】:

      【解决方案2】:

      我只是通过以下方式做到了这一点:

      在我的模板中 &lt;ion-view title="{{pageTitle}}"&gt;

      在我的控制器中$scope.pageTitle = "&lt;img src=\"img/logo-290-90.png\"&gt;";

      【讨论】:

        【解决方案3】:

        考虑到您正在使用导航栏,您应该使用 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>
        

        【讨论】:

          【解决方案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>
          

          根据您的喜好更改图像高度和 src。 :)

          【讨论】:

            【解决方案5】:

            将所需的图像放在应用程序的“www/img”文件夹中。然后使用下面的代码 在 index.html 中

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

            【讨论】:

              【解决方案6】:

              还可以进行以下操作:

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

              【讨论】:

                猜你喜欢
                • 2021-04-09
                • 2018-10-24
                • 2012-12-15
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2011-10-21
                • 2020-12-16
                相关资源
                最近更新 更多