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

你可以試試這個。

<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

柱塞

要刪除截斷的文本，您可以使用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>

更新 -擴展ion-header CSS

要擴展ion-header ，請將其添加到CSS

.expanded ion-title {
  position: initial;
}