Latest web development tutorials

イオントップスとボトムス

イオンヘッダーバー

これは画面のヘッダのタイトルバーの上部に固定されています。 あなたはこのスタイルそれはバーサブヘッダ」に追加する場合は、副題されます。

使用法 

<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>
<ion-content>
  Some content!
</ion-content>

API

プロパティ タイプ 説明
ALIGN-タイトル
（オプション）
string

これは、タイトルのアラインメントです。 設定されていない場合は、電話のデフォルトのレイアウト（イオスデフォルトは中央に配置され、Androidのデフォルト左）に従います。 その値は、「右」、「中央」「左」することができます。

無タップスクロール
（オプション）
boolean

デフォルトでは、画面の内容をクリックしてタイトルバーのヘッドがヘッドにスクロールします、ノータップスクロールアクションを無効にするには、trueに設定することができます。 。 その値は、ブール値（真/偽）です。

イオンフッターバー

簡単に魅力的にイオンフッターバーを理解し、イオンヘッダーバーを知っています！ 唯一のイオンフッターバーが画面の下部にあります。

使用法 

<ion-content>
  Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
  <div class="buttons">
    <button class="button">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons" ng-click="doSomething()">
    <button class="button">Right Button</button>
  </div>
</ion-footer-bar>

API

イオンヘッダーバーは、イオンフッターバーのみ揃え、タイトルのこのAPIは異なります。

プロパティ タイプ 説明
ALIGN-タイトル
（オプション）
string

これは、タイトルのアラインメントです。 設定されていない場合は、電話のデフォルトのレイアウト（イオスデフォルトは中央に配置され、Androidのデフォルト左）に従います。 その値は、「右」、「中央」「左」することができます。