离子 - 标头

---

Ionic 标题栏位于屏幕顶部。它可以包含标题、图标、按钮或其他一些元素。您可以使用预定义的标头类别。您可以在本教程中查看所有内容。

添加标题

您可能在应用程序中使用的所有栏的主要类是bar。此类将始终应用于应用程序中的所有栏。所有bar 子类都将使用前缀 – bar。

如果要创建标题，则需要在主栏类之后添加栏标题。打开www/index.html文件并在body标记内添加标头类。我们向index.html 主体添加一个标头，因为我们希望它在应用程序的每个屏幕上都可用。

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

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

子标题

您可以创建一个位于标题栏正下方的子标题。以下示例将展示如何向您的应用添加标题和子标题。在这里，我们使用“自信”（红色）颜色类别设置子标题的样式。

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

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

当您的路线更改为任何应用程序屏幕时，您会注意到标题和子标题覆盖了一些内容，如下面的屏幕截图所示。

要解决此问题，您需要将“has-header”或“has-subheader”类添加到屏幕的离子内容标签中。从www/templates打开 HTML 文件之一，并将has-subheader类添加到ion-content中。如果您仅在应用程序中使用标头，则需要添加has-header类。

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

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