Ionic - Javascript 页脚

此指令将在屏幕底部添加一个页脚栏。

使用页脚

Ionic 页脚可以通过应用 `ion-footer-bar` 类来添加。其使用方法与页眉相同。我们可以添加标题，并使用 `align-title` 属性将其放置在屏幕的左侧、中央或右侧。使用 `bar` 前缀，我们可以使用 Ionic 颜色。让我们创建一个带有居中标题的红色页脚。

<ion-footer-bar align-title = "center" class = "bar-assertive">
   <h1 class = "title">Title!</h1>
</ion-footer-bar>

以上代码将生成以下屏幕：

添加元素

我们可以向 `ion-footer-bar` 中添加按钮、图标或其他元素，并将应用其样式。让我们向页脚添加一个按钮和一个图标。

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
  
   <h1 class = "title">Footer</h1>

   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

以上代码将生成以下屏幕：

添加子页脚

我们向您展示了如何使用子页眉。同样，也可以创建子页脚。它将位于页脚栏上方。我们只需要向 `ion-footer-bar` 元素添加 `bar-subfooter` 类即可。

在接下来的示例中，我们将添加一个子页脚，位于我们之前创建的页脚栏上方。

<ion-footer-bar class = "bar-subfooter bar-positive">
   <h1 class = "title">Sub Footer</h1>
</ion-footer-bar>

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
  
   <h1 class = "title">Footer</h1>

   <div class = "buttons" ng-click = "doSomething()">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

以上代码将生成以下屏幕：