イオン-フッター

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

フッターの追加

Ionicフッターのメインクラスは bar(ヘッダーと同じ)。画面にフッターを追加する場合は、追加する必要がありますbar-footer メインの後の要素へのクラス barクラス。アプリのすべての画面でフッターを使用したいので、フッターをに追加しますbodyindex.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>

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