Ionic Javascript页脚

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

使用页脚

可以通过应用 Ionic - 页脚 - 栏 类来添加 Ionic页脚 。使用它与使用标题相同。我们可以使用 align-title 属性添加标题并将其放在屏幕的左侧，中间或右侧。使用前缀 栏 ，我们可以使用Ionic颜色。让我们创建一个红色的页脚，标题位于中心。

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

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

IonicJavascript页脚

添加元素

我们可以在 Ionic页脚栏中 添加按钮图标或其他元素，并将应用它们的样式。让我们在页脚中添加一个按钮和一个图标。

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

以上代码将产生以下屏幕

IonicJavascript页脚元素

添加子页脚

我们向您展示了如何使用子标头。可以创建子页脚的方式相同。它将位于页脚栏上方。我们需要做的就是在我们的 Ionic - 页脚 - 杆 元素中添加一个 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>

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

IonicJavascript子页脚