标题两侧的Ionic 2导航栏图标

hof1towb 于 2022-12-09 发布在 Ionic

关注(0)|答案(3)|浏览(167)

我试着在标题位于中间的离子头两侧各添加两个图标，但最终总是在右侧添加两个图标。
这是我的密码

<ion-header>
  <ion-navbar color="primary">
    <ion-buttons start>
      <button ion-button icon-only><ion-icon name="chatboxes"></ion-icon></button>
    </ion-buttons>
    <ion-title>Title</ion-title>
    <ion-buttons end>
      <button ion-button icon-only><ion-icon name="notifications"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

这导致了以下报头：

我想不通，尝试了不同类型的教程，并试图复制他们的例子，但没有任何成功。它也没有样式，所以没有什么应该搞乱布局。感觉像“开始”元素是在这个版本的离子或什么东西的bug。有人能指出我的正确方向吗？
这是我运行“ionic info”时的输出：

Your system information:

 ordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.5
Xcode version: Not installed

ionic-framework

来源：https://stackoverflow.com/questions/42566618/ionic-2-navbar-icons-on-both-side-of-title

3条答案

按热度按时间

cfh9epnr1#

我使用了left而不是start
检查此plunker

<ion-header>
  <ion-navbar color="primary">
    <ion-buttons left>
        <button ion-button icon-only>
          <ion-icon name="chatboxes"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>Title</ion-title>
    <ion-buttons right>
      <button ion-button icon-only><ion-icon name="notifications"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

赞(0）回复(0）举报 2022-12-09

rur96b6h2#

@varun aaruru答案是正确的。我只是想补充添加hideBackButton="true"删除后退按钮

<ion-header hideBackButton="true">
    <ion-navbar>
        <ion-title>trans-result</ion-title>
    </ion-navbar>
</ion-header>

赞(0）回复(0）举报 2022-12-09

jum4pzuy3#

我想要一个具有多行标题和两端的向后和向前箭头的离子工具栏：

经过一些试验，这是可行的：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button  [routerLink] = "['/user-login']">
        <ion-icon slot="icon-only" name="arrow-back-circle-sharp"></ion-icon>
      </ion-button>
    </ion-buttons>

      <ion-title>Yummy Pizzas</ion-title>
      <ion-title  size="small">Welcome, {{userName}}!</ion-title>

      <ion-buttons slot="end">
        <ion-button  [routerLink] = "['/pizza-menu']">
        <ion-icon slot="icon-only" name="arrow-forward-circle-sharp"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

赞(0）回复(0）举报 2022-12-09

我来回答

标题两侧的Ionic 2导航栏图标

3条答案

相关问题

热门标签

最新问答