Ionic-js-header

Ionic-Javascriptヘッダー

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

JavaScriptヘッダーを使用する

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

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

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

イオンヘッダーバー

スタイリングヘッダー

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

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

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

イオンヘッダースタイリング

要素を追加する

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

<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* に追加されると、Subヘッダーが作成されます。 *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>

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

Ionic Header Bar Sub-Header