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>

以上程式碼將生成以下螢幕：