이온 머리와 바닥


ion-header-bar

화면 상단에 고정되는 헤더 제목 표시줄입니다. 여기에 'bar-subheader' 스타일을 추가하면 자막이 됩니다.

Usage

<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

PropertyTypeDescription
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


与 ion-header-bar 不同的是，ion-footer-bar 只有 align-title 这个 API。


no-tap-scroll
属性类型描述
align-title
(optional)
string이것은 제목을 정렬합니다. 설정이 없으면 휴대폰의 기본 레이아웃에 따라 배치됩니다. (Ios의 경우 기본값은 중앙 정렬, Android의 경우 기본값은 그대로 유지됩니다.) 값은 '왼쪽', '가운데', '오른쪽'일 수 있습니다.

(선택 사항)🎜🎜🎜🎜boolean🎜🎜🎜기본적으로 화면을 클릭하면 헤더 제목 표시줄의 내용이 헤더로 스크롤됩니다. . no-tap-scroll을 true로 설정하여 이 작업을 비활성화할 수 있습니다. . 해당 값은 부울(true/false)입니다. 🎜🎜🎜🎜🎜🎜🎜ion-footer-bar🎜🎜이제 ion-header-bar를 알았으니 ion-footer-bar를 이해하기가 훨씬 쉬울 거예요! ion-footer-bar가 화면 하단에 있습니다. 🎜🎜Usage🎜rrreee🎜API🎜🎜
🎜ion-header-bar와 다르게 ion-footer-bar에는 align-title API만 있습니다. ㅋㅋㅋ 정렬이다 제목. 설정이 없으면 휴대폰의 기본 레이아웃에 따라 배치됩니다. (Ios의 경우 기본값은 중앙 정렬, Android의 경우 기본값은 그대로 유지됩니다.) 값은 '왼쪽', '가운데', '오른쪽'일 수 있습니다. 🎜🎜🎜🎜🎜🎜