[onsen-ui] 5. toolbar

앱 구현 혹은 웹 구현에서 툴바는 진짜 많이 사용된다. 

안드로이드, 아이폰은 기본적으로 가지고 간다. 

 

하이브리드에서 만들기 귀찮고 구현하기 까다로운 

툴바를 온센 UI를 써서 만들어 보자. 

 

기본적인 구조는 다음과 같다.

<v-ons-page>
  <v-ons-toolbar>
      <div class="left">
          <v-ons-back-button></v-ons-back-button>
      </div>
      <div class="center">{{ title }}</div>
      <div class="right">
          <v-ons-toolbar-button icon="ion-navicon, material: md-menu"></v-ons-toolbar-button>
      </div>
  </v-ons-toolbar>
</v-ons-page>

 

 

왼쪽 영역, 가운데 영역, 오른쪽 영역으로 나뉘어져 있으며 

왼쪽에 일반적으로 뒤로가기 버튼을 놓는다. 

 

ons-back-button을 놓으면 이벤트가 자동으로 navigation에 있는 컴포넌트를 하나 빼주고

오른쪽으로 해당 페이지가 사라지는 애니메이션이 발생한다. 

 

위치는 페이지 하단에 있어야 하며 

각각 페이지 별로 넣어줘야 하는 불편함이 있지만 

그래도 좋다. 

 

페이지 별로 넣기 힘들때는 

layout -> default 에 설정해주면 된다. 

 

대신 모든 페이지에 적용하면 각 페이지별 커스텀을 하기가 힘들다. 

 

선택은 알아서....ㅎ

 

 

출처 : https://onsen.io/v2/api/vue/v-ons-toolbar.html