Ionic Javascript标题


这是Ionic指令,它将添加标题栏。

使用JavaScript标头

要创建JavaScript标题栏,我们需要在HTML文件中应用 ion-header-bar 指令。由于默认标题是白色,我们将添加 标题 ,因此它将在白色背景上显示。我们将它添加到我们的 index.html 文件中。

<ion-header-bar>
   <h1 class = "title">Title!</h1>
</ion-header-bar>

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

Ionic标题栏

造型标题

就像CSS Header Bar一样,JavaScript对应物可以以类似的方式设置样式。要应用颜色,我们需要添加带有 条形 前缀的颜色类。因此,如果我们想使用蓝色标题,我们将添加一个 bar-positive 类。我们还可以通过添加 align-title 属性 将标题 移动到屏幕的一侧。此属性的值可以是 中心左侧右侧

<ion-header-bar align-title = "left" class = "bar-positive">
   <h1 class = "title">Title!</h1>
</ion-header-bar>

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

Ionic头部造型

添加元素

您通常需要在标题中添加一些元素。以下示例显示如何在左侧放置一个 按钮 ,在Ionic标题栏的右侧放置一个 图标 。您还可以在标题中添加其他元素。

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>

   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

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

Ionic标题栏元素

添加子标题

bar-subheader 类添加到 ion-header-bar 时,会创建一个Sub头。我们将添加一个 bar- assertive 类来将红色应用于我们的子标题。

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>

   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

<ion-header-bar class = "bar-subheader bar-assertive">
   <h1 class = "title">Subheader</h1>
</ion-header-bar>

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

Ionic标题栏子标题