Ionic - 頭部

Ionic 頭部欄位於螢幕頂部。它可以包含標題、圖示、按鈕或其他一些元素。有一些預定義的頭欄類可供使用。您可以在本教程中檢視所有內容。

新增頭部

您在應用程式中可能使用的所有欄的主要類是bar。此類將始終應用於應用程式中的所有欄。所有bar 子類都將使用字首 – bar。

如果您想建立頭部，則需要在主bar類之後新增bar-header。開啟您的www/index.html檔案，並在body標籤內新增頭部類。我們在index.html body中新增頭部，因為我們希望它在應用程式的每個螢幕上都可用。

由於bar-header類應用了預設（白色）樣式，因此我們將在其頂部新增標題，以便您可以將其與螢幕的其餘部分割槽分開來。

<div class = "bar bar-header">
   <h1 class = "title">Header</h1>
</div>

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

頭部顏色

如果您想設定頭部樣式，只需向其新增相應的顏色類即可。設定元素樣式時，需要新增主元素類作為顏色類的字首。由於我們正在設定頭部欄的樣式，因此字首類將為bar，在本示例中我們要使用的顏色類為positive（藍色）。

<div class = "bar bar-header bar-positive">
   <h1 class = "title">Header</h1>
</div>

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

您可以使用以下九個類中的任何一個，為您的應用程式頭部提供您選擇的顏色 -

頭部元素

我們可以在頭部內新增其他元素。以下程式碼是在頭部內新增選單按鈕和主頁按鈕的示例。我們還將在頭部按鈕的頂部新增圖示。

<div class = "bar bar-header bar-positive">
   <button class = "button icon ion-navicon"></button>
   <h1 class = "title">Header Buttons</h1>
   <button class = "button icon ion-home"></button>
</div>

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

子頭部

您可以建立一個子頭部，它將位於頭部欄正下方。以下示例將顯示如何向您的應用程式新增頭部和子頭部。在這裡，我們使用“assertive”（紅色）顏色類為子頭部設定了樣式。

<div class = "bar bar-header bar-positive">
   <button class = "button icon ion-navicon"></button>
   <h1 class = "title">Header Buttons</h1>
   <button class = "button icon ion-home"></button>
</div>

<div class = "bar bar-subheader bar-assertive">
   <h2 class = "title">Sub Header</h2>
</div>

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

當您的路由更改為應用程式螢幕中的任何一個時，您會注意到頭部和子頭部覆蓋了一些內容，如下面的螢幕截圖所示。

要解決此問題，您需要向螢幕的ion-content標籤新增‘has-header’或‘has-subheader’類。開啟www/templates中的一個 HTML 檔案，並將has-subheader類新增到ion-content。如果您僅在應用程式中使用頭部，則需要新增has-header類。

<ion-content class = "padding has-subheader">

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