Ionic - JavaScript 页脚

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

使用页脚

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

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

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

Ionic Javascript 页脚

添加元素

我们可以向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>

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

Ionic Javascript 页脚元素

添加子页脚

我们向您展示了如何使用子标题。可以用同样的方式创建子页脚。它将位于页脚栏上方。我们需要做的就是将bar-subfooter类添加到ion-footer-bar元素中。

在下面的示例中，我们将在之前创建的页脚栏上方添加子页脚。

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

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

Ionic Javascript 子页脚