[onsen-ui] 4. tabbar

모바일 하이브리드 앱을 만들때 네이티브의 느낌을 물씬 풍기게 하기 위해서는 

하단, 상단의 메뉴 탭바의 구현이 불가피 하다. 

 

일일히 디바이스 height  맞춰주고 이미지 넣어주고 이벤트 구현 하는 귀찮음을 

온센을 통해 해결 해 보자. 

 

 

대략 이런 디자인 

 onsen ui  참조

 

tabbar 의 구성은 tabbar 와 tab으로 구성된다. 

 

기본적으로 홈페이지에 나와있는 사용 방법은 

배열을 만들어 해당 배열을 탭바 태그 안에 넣어서 

애니메이션이랑 이벤트 넣고 스타일 정하는 방법이다. 

 

<v-ons-tabbar
  :tabs="[
    { label: 't1', page: p1 },
    { label: 't2', page: p2, props: { aPageProp: 'hello' } }
  ]"
>
</v-ons-tabbar>

 

label에 택스트 이름이 나오고 

page에 해당 페이지 이동,  props는 해당 페이지 안의 data 전달 혹은 상속 되겠다. 

 

사실 네비게이션과 동일하게 해당 탭 바 안에 각각 페이지를 집어 넣어서 화면만 전환하는 느낌이 되겠다. 

 

배열 안에 넣으면 왠지 페이지를 넣은 느낌이 하나도 안들어서 

난 밖으로 빼서 이벤트도 넣고 페이지도 좀더 가시적으로 보였으면 한다라고 생각한다면 

이렇게 만들 수 있겠다. 

 

<v-ons-tabbar>
  <template slot="pages">
    <home-page></home-page>
    <news-page></news-page>
    <settings-page></settings-page>
  </template>
  
  <v-ons-tab v-for="(tab, i) in tabs"
    :icon="tabs[i].icon"
    :label="tabs[i].label"
    :badge="tabs[i].badge"
    ></v-ons-tab>

</v-ons-tabbar>

...

import HomePage from '~~'
import NewsPage from '~~'
import SettingPage from '~~'

data() {
	return {
    	tabs: [
        	{
            	icon: '', // icon image src
                label:'', // text label
                badge: 0  // badge number(count)
            },
            {
            ...
        ]
    }
}

 

난 이게 이벤트 넣고 코드도 보기 좋더라....

 

 

참조 : https://onsen.io/v2/api/vue/v-ons-tab.html

v-ons-tab - Onsen UI