Ionic-js-footer

イオン-Javascriptフッター

このディレクティブは、画面の下部にフッターバーを追加します。

フッターを使用する

Iionフッターを追加するには、 ion-footer-bar クラスを適用します。 これを使用することは、ヘッダーを使用することと同じです。 align-title 属性を使用して、タイトルを追加し、それを画面の左側、中央、または右側に配置できます。 接頭辞 bar を使用すると、イオン色を使用できます。 タイトルを中央に配置した赤いフッターを作成しましょう。

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

上記のコードは、次の画面を生成します-

Ionic Javascript Footer

要素を追加する

ボタンアイコンまたはその他の要素を 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 Footer Elements

サブフッターを追加する

サブヘッダーの使用方法を示しました。 サブフッターを作成できるのと同じ方法。 フッターバーの上に配置されます。 必要なのは、 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 Sub Footer