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