[onsen-ui] 2. page

화면의 페이지 단위에서 가장 최 상단에 필수로 위치하는 태그로 

모든 화면에 기본적으로 들어간다. 

 

페이지를 전환하는 방법은 navigation, carousel, segment, toolbar가 있으며 

onsen ui 홈페이지의 api 종류 항목중 오늘은 page에 정의된 내용을 다룰 예정이다. 

 

onsen ui api page

 

기본적인 사용 방법

<template>
  <v-ons-page>
    Content goes here
  </v-ons-page>
</template>

vue page 단위 혹은 nuxt  page 폴더 안에 정의된 vue 파일, component에서의 페이지 단위는 모두 최상단에 [v-ons-page] 안에 들어 있어야 한다. 

 

화면의 크기에 맞춰서 보여지는 부분을 맞춰 준다. 또한 onsen-ui에서 제공하는 강력한 네비게이션 기능을 사용하기 위해서 이다. 

네비게이션은 나중에....

 

page 기능의 가장큰 특징은 [v-ons-page]를 사용하면 내부에 background와 content 클래스 함수를 가지고 있는 div 태그가 자동적으로 생긴다는 점이다. 

해당 태그를 기준으로 백그라운드와 내부에 들어가는 컨텐츠를 구문하여 스타일을 정의 및 구분 지어서 사용 할 수 있다. 

 

css로 그냥 .background나 .content로 정의해서 사용하면 스타일이 적용되지 않는다. 

해당 background와 content를 사용하기 위해서는 아래와 같이 정의 하여 사용해한다. 

<template>
  <v-ons-page>
    Toolbar here
    <div class="background"></div>
    <div class="content">
      Scrollable content here
    </div>
    Fixed content here
  </v-ons-page>
</template?

 

ps.

 

v-ons-page 에서 제공하는 다른 기능 중

infinite-scroll ,  modifier 등을 사용하려는 당신.

 

쓰지마세요. 

 

잘 안먹고 귀찮고 커스텀 하기 힘들어요.

 

 

 끝.

 

 

 

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

v-ons-page - Onsen UI