Ionic-header
イオン-ヘッダー
- Ionicヘッダーバー*は画面の上部にあります。 タイトル、アイコン、ボタン、またはその他の要素を含めることができます。 使用可能なヘッダーの定義済みクラスがあります。 このチュートリアルですべてを確認できます。
ヘッダーを追加する
アプリで使用する可能性のあるすべてのバーのメインクラスは bar です。 このクラスは、アプリのすべてのバーに常に適用されます。 すべての* barサブクラス*は、プレフィックス- bar を使用します。
ヘッダーを作成する場合は、メインの bar クラスの後に bar-header を追加する必要があります。 www/indexl ファイルを開き、 body タグ内にヘッダークラスを追加します。 アプリのすべての画面で利用できるようにするため、 indexl body にヘッダーを追加します。
*bar-header* クラスにはデフォルト（白）のスタイリングが適用されているため、その上にタイトルを追加し、画面の他の部分と区別できるようにします。<div class = "bar bar-header">
<h1 class = "title">Header</h1>
</div>上記のコードは、次の画面を生成します-
ヘッダーの色
ヘッダーのスタイルを設定する場合は、適切な色クラスを追加するだけです。 要素のスタイルを設定する場合、メイン要素クラスをカラークラスのプレフィックスとして追加する必要があります。 ヘッダーバーのスタイルを設定しているため、プレフィックスクラスは bar になり、この例で使用するカラークラスは positive （青）になります。
<div class = "bar bar-header bar-positive">
<h1 class = "title">Header</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 |
ヘッダー要素
ヘッダー内に他の要素を追加できます。 次のコードは、ヘッダー内に menu ボタンと home ボタンを追加する例です。 また、ヘッダーボタンの上にアイコンを追加します。
<div class = "bar bar-header bar-positive">
<button class = "button icon ion-navicon"></button>
<h1 class = "title">Header Buttons</h1>
<button class = "button icon ion-home"></button>
</div>上記のコードは、次の画面を生成します-
サブヘッダー
ヘッダーバーのすぐ下に配置されるサブヘッダーを作成できます。 次の例は、アプリにヘッダーとサブヘッダーを追加する方法を示します。 ここでは、サブヘッダーを「アサーティブ」（赤）カラークラスでスタイル設定しました。
<div class = "bar bar-header bar-positive">
<button class = "button icon ion-navicon"></button>
<h1 class = "title">Header Buttons</h1>
<button class = "button icon ion-home"></button>
</div>
<div class = "bar bar-subheader bar-assertive">
<h2 class = "title">Sub Header</h2>
</div>上記のコードは、次の画面を生成します-
ルートをアプリ画面のいずれかに変更すると、下のスクリーンショットに示すように、ヘッダーとサブヘッダーが一部のコンテンツをカバーしていることがわかります。
これを修正するには、画面の ion-content タグに*「has-header」または「has-subheader」クラスを追加する必要があります。 *www/templates からHTMLファイルの1つを開き、 has-subheader クラスを ion-content に追加します。 アプリでヘッダーのみを使用する場合は、代わりに has-header クラスを追加する必要があります。
<ion-content class = "padding has-subheader">上記のコードは、次の画面を生成します-
