0

我的 ionic 3 标题最后需要显示菜单图标、标题和按钮。然而，对于这 3 件事，标题将它们呈现在 3 个不同的行中，而不是在一行中。以截图为例

https://www.dropbox.com/s/jrn95uppcwol3v8/ionic_header_issue.png?dl=0

标题如下 home.html

<ion-header>
        <ion-navbar hideBackButton="true">
            <page-header [title]="'My Company'"></page-header>
        </ion-navbar>
</ion-header>

pageHeader.html

 <ion-buttons left>
        <button ion-button menuToggle icon-only >
                <ion-icon name='menu'></ion-icon>
        </button>
    </ion-buttons>
  <ion-title>{{title}}</ion-title>
  <ion-buttons right>
      <button ion-button (click)="openCart()"><ion-icon name="cart"></ion-icon>
          <ion-badge >1</ion-badge>
      </button>
  </ion-buttons>
4

2 回答 2

0

尝试使用带有左指令的离子按钮将菜单图标包装起来，然后从右端更改：

<ion-header>
  <ion-navbar>
    <ion-buttons left>
      <button ion-button icon-only>
        <ion-icon name="menu"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>VIK</ion-title>
    <ion-buttons right>
      <button ion-button>
        <ion-icon name="cart"></ion-icon>
        <ion-badge>0</ion-badge>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

它在新的 Ionic 3 模板中运行良好： https ://stackblitz.com/edit/ionic-neb7g5

也许你已经覆盖了一些默认的 CSS 样式？

于 2018-03-21T16:40:37.897 回答
0

添加一些像这样的内联样式

<ion-header>
<ion-navbar hideBackButton="true">
<button ion-button menuToggle>
<ion-icon ios="ios-menu" md="md-menu"></ion-icon>
</button>
<ion-title class="title">Your Title
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="navcart()">
<ion-icon name="cart"></ion-icon>
<ion-badge class="carts" item-right color="danger">{{noOfItems}}</ion-badge>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
于 2018-07-23T05:12:38.667 回答