CODEWITHSUNDEEP
ionic-framework
user1532669
user1532669

Reputation: 2378

How to center header on Ionic app

I'm using Iconic 1 and I want to center the "MyAccount" in the header. I've had a look at the docs and tried the code but it places the content in the content pane.

This is the code I've got at the moment that displays the "MyAccount" at top:

<ion-view view-title="MyAccount">
  <ion-content>
    <h1>My Account</h1>
  </ion-content>
</ion-view>

I'm thinking I'll need to add the <ion-header-bar></ion-header-bar> directive somewhere. I tried adding it but it didn't have the desired effect.

Can anyone suggest how to do this?

enter image description here

Upvotes: 1

Views: 5287

Answers (1)

Tomislav Stankovic
Tomislav Stankovic

Reputation: 3128

To use the dynamic header bar behavior in Ionic-Angular, use the <ion-header-bar> directive:

<ion-header-bar
  title="MyAccount"
  left-buttons="leftButtons"
  right-buttons="rightButtons"
  type="bar-positive"
  align-title="center">
</ion-header-bar>

Source: Headers

Example:

<ion-header-bar align-title="center" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">MyAccount</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>
<ion-content class="has-header">
  Some content!
</ion-content>

Upvotes: 3

Related Questions