Question

我的离子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>

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>

标题栏高度，带菜单和按钮

2 个答案: