Ionic标题

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

添加标题

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

如果要创建标题，则需要在主 bar 类之后添加 bar-header 。打开 www / index.html 文件，并在 body 标签中添加 header 类。我们正在为 index.html body 添加一个标头，因为我们希望它可以在应用程序的每个屏幕上使用。

由于 bar-header 类已应用默认（白色）样式，我们将在其上添加标题，以便您可以将其与屏幕的其余部分区分开来。

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

上面的代码将生成以下屏幕

标题颜色

如果要设置标题样式，只需要为其添加适当的颜色类。设置元素样式时，需要将主元素类作为前缀添加到颜色类中。由于我们正在设置标题栏的样式，因此前缀类将为 bar ，我们要在此示例中使用的颜色类为 正 （蓝色）。

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

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

您可以使用以下九个类中的任何一个为您的应用标题提供您选择的颜色 -

标题元素

我们可以在标题中添加其他元素。以下代码是在标题内添加 menu 按钮和 home 按钮的示例。我们还将在标题按钮顶部添加图标。

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

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

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

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

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

上面的代码将生成以下屏幕