Question

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

Answer 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中的一些额外信息。

Answer 2

我通过以下方式做到了这一点：

在我的模板中 <ion-view title="{{pageTitle}}">

并在我的控制器中$scope.pageTitle = "<img src=\"img/logo-290-90.png\">";

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

Answer 4

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import actions from '../redux/actions'

class App extends Component {

  handleClick() {
    store.dispath(action.helloWorld("jimmy")); //this dispatches an action, which goes to the reducer to change the state and adds 'welcome' before 'jimmy'
  }

  render() {
    return (
      <div onClick={this.handleClick.bind(this)}>
        {store.getState()} //getState function to access store values
      </div>
    )
  }

  }

  function mapStateToProps(state) {
    return state
  }

  function mapDispatchToProps(dispatch) {
    return {
      actions: bindActionCreators(actions, dispatch) //binds all the actions with dispatcher and returns them
    }
  }

  export default connect(mapStateToProps, mapDispatchToProps)(App)

根据您的喜好更改图像高度和src。：）

Answer 5

将所需图像放入＆＃34; www / img＆＃34;您应用中的文件夹。然后使用以下代码在index.html

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

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

如何在离子中添加标题到标题-bar

6 个答案: