带有菜单和按钮的标题栏高度

Question

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

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

标题如下所示首页.html

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

页眉.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>

Answer 1

尝试使用带有左指令的离子按钮将菜单图标包装起来，并将首尾更改为右：

<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 样式？

Answer 2

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

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