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

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

Answer 2

你可以试试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>