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

添加标题

您可以在应用程序中使用的所有酒吧的主要类别是bar 。此类将始终应用于您应用中的所有条形图。所有bar子类都将使用前缀– bar 。

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

由于bar-header类已应用默认(白色)样式，因此我们将在其顶部添加标题，因此您可以将其与屏幕的其余部分区分开。

   
Header

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

标题颜色

如果要样式化标题，则只需向其添加适当的颜色类。在为元素设置样式时，需要将主元素类添加为颜色类的前缀。由于我们是造型标题栏，前缀类将是酒吧和颜色类，我们希望在这个例子中使用的是正的(蓝色)。

   
Header

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

您可以使用以下九个类中的任何一个为您的应用标题指定颜色：

标头元素

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

   
   
Header Buttons
   

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

副标题

您可以创建一个位于标题栏正下方的子标题。以下示例将显示如何向应用程序添加标题和子标题。在这里，我们为子标头设置了“断言”(红色)颜色类样式。

   
   
Header Buttons
   



   
Sub Header

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

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

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

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