イオンヘッドとボトム
ion-header-bar
これは、画面上部に固定されたヘッダー タイトル バーです。これに「bar-subheader」スタイルを追加するとサブタイトルになります。
使用法
<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-title (オプション) | 文字列string | 这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。 |
| no-tap-scroll (optional) | boolean | 默认情况下，头部标题栏在点击屏幕时内容会滚动到头部，可以将 no-tap-scroll 设置为 true 来禁止该动作。。它的值是布尔值（true/false）。 |
ion-footer-bar
知道了 ion-header-bar ，理解ion-footer-bar就轻松多啦！只是 ion-footer-bar 是在屏幕的底部。
用法
<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
| 属性 | 类型 | 描述 |
|---|---|---|
| align-title (optional) | string | これはタイトルを揃えます。設定がない場合は、携帯電話のデフォルトのレイアウトに従って配置されます（Ios のデフォルトは中央に配置され、Android のデフォルトはそのままです）。その値は「left」、「center」、「right」です。 |
boolean🎜🎜🎜デフォルトでは、画面をクリックするとヘッダーのタイトルバーの内容がヘッダーまでスクロールします。このアクションを無効にするには、no-tap-scroll を true に設定します。 。その値はブール値 (true/false) です。 🎜🎜🎜🎜🎜🎜🎜ion-footer-bar🎜🎜 ion-header-bar について理解できたので、ion-footer-bar を理解するのがずっと簡単になります。画面の下部にあるのは ion-footer-bar だけです。 🎜🎜使用法🎜rrreee🎜API🎜🎜🎜ion-header-barとは異なり、ion-footer-barにはalign-title APIのみがあります。 🎜
🎜🎜🎜🎜🎜属性🎜🎜タイプ🎜🎜説明🎜🎜🎜🎜🎜🎜align-title🎜🎜(オプション)🎜🎜🎜🎜
string🎜 🎜🎜 これがアライメントですのタイトル。設定がない場合は、携帯電話のデフォルトのレイアウトに従って配置されます（Ios のデフォルトは中央に配置され、Android のデフォルトはそのままです）。その値は「left」、「center」、「right」です。 🎜🎜🎜🎜🎜🎜
