Ionic subheader

Ionic Framework ionic-v3
1

Is there a subheader directive in Ionic 2 ?, I cant find it!

2 Likes
2

You can use:

 <ion-toolbar>
    <ion-title>Subheader</ion-title>
</ion-toolbar>
3

I was wondering about this, but this toolbar is not fixed.

4

try adding multiple ion-headers

<ion-header>
  <ion-title>Header</ion-title>
</ion-header>
<ion-header>
  <ion-title>Subheader</ion-title>
</ion-header>
5

This works for me

<ion-header>
  <ion-navbar>
    <ion-title>Header</ion-title>
  </ion-navbar>
  <ion-toolbar>
    <ion-title>Subheader</ion-title>
  </ion-toolbar>
</ion-header>
5 Likes
6

This is not working either, They are placed on top of each other

7

What if you want to add a subheader in a child component ?

1 Like
8 
<ion-header>
  <ion-navbar>
    <ion-title>Header</ion-title>
  </ion-navbar>
  <ion-toolbar>
    <ion-title>Subheader</ion-title>
  </ion-toolbar>
</ion-header>

seems to work, althought the height of the toolbar is larger than the height of the navbar…

11

In case if you are still seeking,
try this:

<ion-header>
  <ion-navbar>
    <ion-title>Title <br /><span style="font-size: 1.5rem; padding:0px">sub title</span></ion-title>
  </ion-navbar>
</ion-header>
12

Thank you, this works fine!

13

Perfect ! works like a charm.

14

You can also make use of ion-row in ion-header to achieve this.

<ion-header>
<ion-row>
<ion-col>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
</ion-col>
</ion-row>
</ion-header>

1 Like
15

Good suggestion. This worked for me to split two text items in a Title.

    <ion-title>
      <ion-row>
        <ion-col>Management Home</ion-col>
        <ion-col style="text-align: right">{{ userObj.name }}</ion-col>
      </ion-row>
    </ion-title>