如何在Ionic app上集中标题

Question

我正在使用Iconic 1，我想在标题中居中“MyAccount”。我查看了文档并尝试了代码，但它将内容放在内容窗格中。

这是我目前在顶部显示“MyAccount”的代码：

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

我想我需要在某处添加<ion-header-bar></ion-header-bar>指令。我尝试添加它，但它没有达到预期的效果。

有人可以建议怎么做吗？

Answer 1

要在Ionic-Angular中使用动态标题栏行为，请使用<ion-header-bar>指令：

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

来源：Headers

示例：

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