Ionic-Javascriptヘッダー

これは、ヘッダーバーを追加するIonicディレクティブです。

JavaScriptヘッダーの使用

JavaScriptヘッダーバーを作成するには、を適用する必要があります ion-header-barHTMLファイルのディレクティブ。デフォルトのヘッダーは白なので、追加しますtitle、白い背景に表示されます。追加しますindex.html ファイル。

<ion-header-bar>
   <h1 class = "title">Title!</h1>
</ion-header-bar>

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

スタイリングヘッダー

CSSヘッダーバーと同様に、JavaScriptの対応するものも同様の方法でスタイルを設定できます。色を適用するには、色クラスを追加する必要があります。barプレフィックス。したがって、青いヘッダーを使用する場合は、bar-positiveクラス。を追加して、タイトルを画面の片側に移動することもできますalign-title属性。この属性の値は次のようになります。centerleft または right

<ion-header-bar align-title = "left" class = "bar-positive">
   <h1 class = "title">Title!</h1>
</ion-header-bar>

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

要素の追加

通常、ヘッダーにいくつかの要素を追加する必要があります。次の例は、を配置する方法を示していますbutton 左側と iconイオンヘッダーバーの右側にあります。ヘッダーに他の要素を追加することもできます。

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
   
   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

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

サブヘッダーの追加

サブヘッダーは、 bar-subheader クラスがに追加されます ion-header-bar。追加しますbar-assertive サブヘッダーに赤色を適用するクラス。

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
   
   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

<ion-header-bar class = "bar-subheader bar-assertive">
   <h1 class = "title">Subheader</h1>
</ion-header-bar>

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