Ionic - JavaScript 标头

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

使用 JavaScript 标头

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

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

上面的代码将产生以下屏幕 -

离子标题栏

样式标头

就像 CSS 标题栏一样，JavaScript 标题栏也可以采用类似的方式设计样式。要应用颜色，我们需要添加带有bar前缀的颜色类。因此，如果我们想使用蓝色标题，我们将添加一个bar-positive类。我们还可以通过添加align-title属性将标题移动到屏幕的一侧。该属性的值可以是center、left或right。

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

上面的代码将产生以下屏幕 -

离子标头造型

添加元素

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

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

上面的代码将产生以下屏幕 -

离子标题栏元素

添加子标题

当bar-subheader类添加到ion-header-bar时，就会创建 Sub header 。我们将添加一个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>

上面的代码将产生以下屏幕 -

离子标题栏子标题