Ionic-footer
提供：Dev Guides
イオン-フッター
- イオンフッター*はアプリ画面の下部に配置されます。 フッターの操作は、ヘッダーの操作とほぼ同じです。
フッターを追加する
Ionicフッターのメインクラスは bar （ヘッダーと同じ）です。 画面にフッターを追加する場合は、メインの bar クラスの後に要素に bar-footer クラスを追加する必要があります。 アプリのすべての画面でフッターを使用したいので、それを indexl ファイルの body に追加します。 フッターのタイトルも追加します。
<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つのクラスのいずれかを使用して、アプリのフッターに好みの色を付けることができます-
| Color Class | Description | Result |
|---|---|---|
| bar-light | To be used for white color | |
| bar-stable | To be used for light grey color | |
| bar-positive | To be used for blue color | |
| bar-calm | To be used for light blue color | |
| bar-balanced | To be used for green color | |
| bar-energized | To be used for yellow color | |
| bar-assertive | To be used for red color | |
| bar-royal | To be used for violet color | |
| bar-dark | To be used for black color |
フッター要素
フッターには要素を含めることができます。 ほとんどの場合、フッター内にアイコン付きのボタンを追加する必要があります。
追加された最初のボタンは常に左隅にあります。 最後のものは右側に配置されます。 間にあるボタンは、フッターの左側の最初のボタンの隣にグループ化されます。 次の例では、ボタンの上にアイコンを追加するために 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>上記のコードは、次の画面を生成します-
