Ionic 2如何切换离子头大小

Question

以下是我的基本代码：

<ion-header>
  <ion-navbar>
    <ion-title align="center" (click)="somehowToggleExpand()">
      Some really really long text here...
    </ion-title>
  </ion-navbar>
</ion-header>

默认情况下，此标题栏限制为一行的高度，其中的文本将被截断。如何点击标题栏切换扩展（下拉）标题以显示所有文本？

Answer 1

您可以尝试this.

<ion-header>

  <ion-navbar>
    <ion-buttons start>
      <button ion-button>
        <ion-icon name="contact"></ion-icon>
      </button>
    </ion-buttons>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Title
    </ion-title>
    <ion-buttons end>
      <button ion-button (click)="doClick()">
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

Answer 2

Plunker

要删除截断的文本，您可以使用ngClass添加一个删除非包装文本的类。

CSS

.expanded .toolbar-title {
  white-space: initial;
}

组件

@Page({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  expanded = false;
  somehowToggleExpand() {
    this.expanded = true;
  }
}

标题HTML

<ion-header [ngClass]="{'expanded': expanded}">
  <ion-navbar>
    <ion-title align="center" (click)="somehowToggleExpand()">
      Some really really long text here
    </ion-title>
  </ion-navbar>
</ion-header>

Update - 展开ion-header CSS

要允许ion-header展开，请将其添加到CSS

.expanded ion-title {
  position: initial;
}