Ionic 2 how to toggle ion-header size

0
votes

Here is the basic code I have:

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

By default, this header bar is limited to a height of one line and text inside it is truncated. How can I make it so clicking the header bar toggles expanding (dropping down) the header to show all the text?

2
angularionic-frameworkionic2
you mean menu toggle - Karthick Nagarajan

2 Answers

0
votes

you can try 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>
0
votes

Plunker

To remove the truncated text you can add a class using ngClass that removes non-wrapping text.

CSS

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

Component

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

Header 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 - Expanding ion-header CSS

To allow the ion-header to expand, add this to your CSS

.expanded ion-title {
  position: initial;
}