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