Ionic Javascript标题

这是Ionic指令，它将添加标题栏。

使用JavaScript标头

要创建JavaScript标题栏，我们需要在HTML文件中应用 ion-header-bar 指令。由于默认标题是白色，我们将添加标题，因此它将在白色背景上显示。我们将它添加到我们的 index.html 文件中。

<ion-header-bar>
   <h1 class = "title">Title!</h1>
</ion-header-bar>

上面的代码将生成以下屏幕

Ionic标题栏

造型标题

就像CSS Header Bar一样，JavaScript对应物可以以类似的方式设置样式。要应用颜色，我们需要添加带有条形前缀的颜色类。因此，如果我们想使用蓝色标题，我们将添加一个 bar-positive 类。我们还可以通过添加 align-title 属性 将标题 移动到屏幕的一侧。此属性的值可以是中心，左侧或右侧。

<ion-header-bar align-title = "left" class = "bar-positive">
   <h1 class = "title">Title!</h1>
</ion-header-bar>

上面的代码将生成以下屏幕

Ionic头部造型

添加元素

您通常需要在标题中添加一些元素。以下示例显示如何在左侧放置一个按钮，在Ionic标题栏的右侧放置一个图标。您还可以在标题中添加其他元素。

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>

   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

上面的代码将生成以下屏幕

Ionic标题栏元素

添加子标题

将 bar-subheader 类添加到 ion-header-bar 时，会创建一个Sub头。我们将添加一个 bar- assertive 类来将红色应用于我们的子标题。

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>

   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

<ion-header-bar class = "bar-subheader bar-assertive">
   <h1 class = "title">Subheader</h1>
</ion-header-bar>

上面的代码将生成以下屏幕

Ionic标题栏子标题