이온 머리와 바닥

Header

Header는 화면 상단에 고정되는 구성요소로, 제목과 좌우 기능 버튼을 포함할 수 있습니다.

ionic은 기본적으로 다양한 색상 스타일을 제공하며, 다양한 스타일 이름을 지정할 수 있으며 맞춤 설정할 수도 있습니다.

bar-light

<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>

bar-stable

<div class="bar bar-header bar-stable">
  <h1 class="title">bar-stable</h1>
</div>

bar-긍정적

<div class="bar bar-header bar-positive">
  <h1 class="title">bar-positive</h1>
</div>

bar-calm

<div class="bar bar-header bar-calm">
  <h1 class="title">bar-calm</h1>
</div>

바 균형

<div class="bar bar-header bar-balanced">
  <h1 class="title">bar-balanced</h1>
</div>

바에 활력이 넘칩니다

<div class="bar bar-header bar-energized">
  <h1 class="title">bar-energized</h1>
</div>

bar-assertive

<div class="bar bar-header bar-assertive">
  <h1 class="title">bar-assertive</h1>
</div>

bar-royal

<div class="bar bar-header bar-royal">
  <h1 class="title">bar-royal</h1>
</div>

bar-dark

<div class="bar bar-header bar-dark">
  <h1 class="title">bar-dark</h1>
</div>

하위 헤더

Sub Header도 상단에 고정되어 있습니다. Header 아래에 Header를 작성하지 않더라도 Sub Header 스타일은 위에서부터 하나의 Header가 됩니다. 색상 스타일은 헤더와 동일합니다.

<div class="bar bar-header">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
  <h2 class="title">Sub Header</h2>
</div>

바닥글(하단)

바닥글은 화면 하단에 있으며 여러 콘텐츠 유형을 포함할 수 있습니다.

<div class="bar bar-footer bar-balanced">
  <div class="title">Footer</div>
</div>

Footer는 스타일 이름 bar-header가 bar-footer로 대체된다는 점을 제외하면 위의 Header와 동일합니다.

<div class="bar bar-footer">
  <button class="button button-clear">Left</button>
  <div class="title">Title</div>
  <button class="button button-clear">Right</button>
</div>

또한 하단에 제목이 없지만 오른쪽에 버튼이 필요한 경우 오른쪽 버튼에 다음과 같이 풀라이트를 추가해야 합니다.

<div class="bar bar-footer">
  <button class="button button-clear pull-right">Right</button>
</div>

이온 버튼 →