イオン-ヘッダー

ザ・ Ionic header bar画面の上部にあります。タイトル、アイコン、ボタン、またはその他の要素をその上に含めることができます。使用できるヘッダーの定義済みクラスがあります。このチュートリアルですべてを確認できます。

ヘッダーの追加

アプリで使用する可能性のあるすべてのバーのメインクラスは bar。このクラスは、アプリ内のすべてのバーに常に適用されます。すべてbar subclasses プレフィックスを使用します– bar

ヘッダーを作成する場合は、追加する必要があります bar-header あなたのメインの後 barクラス。あなたのwww/index.html ファイルを作成し、ヘッダークラ​​スを body鬼ごっこ。にヘッダーを追加していますindex.html 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つのクラスのいずれかを使用して、アプリのヘッダーに任意の色を付けることができます-

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

ヘッダー要素

ヘッダー内に他の要素を追加できます。次のコードは、を追加する例です。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>

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

ルートがアプリ画面のいずれかに変更されると、以下のスクリーンショットに示すように、ヘッダーとサブヘッダーが一部のコンテンツをカバーしていることがわかります。

これを修正するには、を追加する必要があります ‘has-header’ または ‘has-subheader’ クラスへ ion-content画面のタグ。からHTMLファイルの1つを開きますwww/templates を追加します has-subheader クラスへ ion-content。アプリでヘッダーのみを使用する場合は、ヘッダーを追加する必要がありますhas-header 代わりにクラス。

<ion-content class = "padding has-subheader">

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