イオントップスとボトムス2024 年の最新の入門チュートリアル。このコースでは イオンヘッダーバー,イオンフッターバー, について学習できます。
これは画面のヘッダのタイトルバーの上部に固定されています。 あなたはこのスタイルそれはバーサブヘッダ」に追加する場合は、副題されます。
<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>
プロパティ | タイプ | 説明 |
---|---|---|
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>
プロパティ | タイプ | 説明 |
---|---|---|
ALIGN-タイトル (オプション) | string | これは、タイトルのアラインメントです。 設定されていない場合は、電話のデフォルトのレイアウト(イオスデフォルトは中央に配置され、Androidのデフォルト左)に従います。 その値は、「右」、「中央」「左」することができます。 |