Ionic - JavaScript 頭部

這是 Ionic 指令，它將新增頭部欄。

使用 JavaScript 頭部

要建立 JavaScript 頭部欄，我們需要在 HTML 檔案中應用 **ion-header-bar** 指令。由於預設的頭部是白色的，我們將新增 **title**，以便它顯示在白色背景上。我們將把它新增到我們的 **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>

以上程式碼將生成以下螢幕 -

新增元素

您通常希望向頭部新增一些元素。以下示例顯示瞭如何在左側放置一個 **button** 並在 **ion-header-bar** 的右側放置一個 **icon**。您還可以向頭部新增其他元素。

<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** 時，就會建立一個子頭部。我們將新增 **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>

以上程式碼將生成以下螢幕 -