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 文件，并为 ion-content 添加 has-subheader 类。如果您的应用仅使用头部，则需要添加 has-header 类。

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

上述代码将生成以下屏幕 −