イオン-フッター

Ionic footerアプリ画面の下部に配置されます。フッターの操作は、ヘッダーの操作とほとんど同じです。

フッターの追加

Ionicフッターのメインクラスは bar（ヘッダーと同じ）。画面にフッターを追加する場合は、追加する必要がありますbar-footer メインの後の要素へのクラス barクラス。アプリのすべての画面でフッターを使用したいので、フッターをに追加しますbody の index.htmlファイル。フッターのタイトルも追加します。

<div class = "bar bar-footer">
   <h1 class = "title">Footer</h1>
</div>

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

フッターカラー

フッターのスタイルを設定する場合は、適切なカラークラスを追加するだけです。要素のスタイルを設定するときは、メイン要素クラスをプレフィックスとしてカラークラスに追加する必要があります。フッターバーをスタイリングしているので、プレフィックスクラスはbar この例で使用するカラークラスは次のとおりです。 assertive （赤）。

<div class = "bar bar-footer bar-assertive">
   <h1 class = "title">Footer</h1>
</div>

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

次の9つのクラスのいずれかを使用して、アプリのフッターに選択した色を付けることができます-

カラークラス	説明	結果
バーライト	白色に使用する
バー安定	ライトグレーに使用します
バーポジティブ	青色に使用する
バー-落ち着いて	水色に使用する
バーバランス	緑色に使用します
バー-通電	黄色に使用します
バー-主張	赤色に使用する
バーロイヤル	バイオレットカラーに使用します
バーダーク	黒色に使用する

フッター要素

フッターには、その中に要素を含めることができます。ほとんどの場合、フッター内にアイコン付きのボタンを追加する必要があります。

追加された最初のボタンは常に左隅にあります。最後のものは右側に配置されます。間にあるボタンは、フッターの左側にある最初のボタンの横にグループ化されます。次の例では、icon ボタンの上にアイコンを追加するクラス。

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon"></button>
   <button class = "button icon ion-home"></button>
   <button class = "button icon ion-star"></button>
   <button class = "button icon ion-checkmark-round"></button>
</div>

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

ボタンを右に移動したい場合は、追加できます pull-right クラス。

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon pull-right"></button>
</div>

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