Ionic-자바 스크립트 바닥 글

이 지시문은 화면 하단에 바닥 글 막대를 추가합니다.

바닥 글 사용

Ionic 바닥 글은 ion-footer-bar수업. 그것으로 작업하는 것은 헤더로 작업하는 것과 동일합니다. 제목을 추가하고 화면 왼쪽, 중앙 또는 오른쪽에 배치 할 수 있습니다.align-title속성. 접두사bar, 우리는 Ionic 색상을 사용할 수 있습니다. 중앙에 제목이있는 빨간색 바닥 글을 만들어 보겠습니다.

<ion-footer-bar align-title = "center" class = "bar-assertive">
   <h1 class = "title">Title!</h1>
</ion-footer-bar>

위의 코드는 다음 화면을 생성합니다.

요소 추가

버튼 아이콘이나 기타 요소를 ion-footer-bar스타일링이 적용됩니다. 바닥 글에 버튼과 아이콘을 추가하겠습니다.

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
  
   <h1 class = "title">Footer</h1>

   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

위의 코드는 다음 화면을 생성합니다.

하위 바닥 글 추가

하위 헤더를 사용하는 방법을 보여 드렸습니다. 하위 바닥 글을 만들 수있는 것과 같은 방법입니다. 바닥 글 막대 위에 있습니다. 우리가해야 할 일은bar-subfooter 우리에게 수업 ion-footer-bar 요소.

다음 예에서는 이전에 만든 바닥 글 막대 위에 하위 바닥 글을 추가합니다.

<ion-footer-bar class = "bar-subfooter bar-positive">
   <h1 class = "title">Sub Footer</h1>
</ion-footer-bar>

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
  
   <h1 class = "title">Footer</h1>

   <div class = "buttons" ng-click = "doSomething()">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

위의 코드는 다음 화면을 생성합니다.