Quasar UI 개발 1 - 컨트롤러 배치 원칙

Quasar 기본틀

Quasar에서는 하나의 화면을 q-page로 관리합니다.

따라서 quasar에서 제공하는 기능을 사용하려면 q-pqge 태그 안에 모든 컴포넌트들이 들어와야 합니다.
코드에서 보자면 vue의 UI 태그인 <template> 안에 <q-page>로 감싸기만 하면 됩니다.

<template> <!-- Vue Template -->
    <q-page> <!-- Quasar Page -->
    
    	<!-- Contents -->
        <div class="bg-secondary"> 
            <q-btn class="bg-primary">Push Me.</q-btn>
        </div>
        
     </q-page>
</template>

 

<적용화면 - 상단의 메뉴바는 기본설정임>

 

UI 컴포넌트 배치의 기본 원칙

 Quasar는 FlexBox와 Grid 시스템을 이용한 배치를 제공하므로 해당 기능을 최대한 사용하여 배치를 해야합니다. Quasar는 Container와 Items라는 개념으로 FlexBox를 제공하는데, 간단히 말하면 UI 컴포넌트가 Items이고 이것들을 보기 좋게 그룹으로 묶은 것이 Container라고 이해하면 편합니다.

 

 매직넘버를 이용한 배치는 최대한 피해서 개발하고 FlexBox의 속성을 이용합시다. 예를 들어 가로 화면의 절반만한 크기의 버튼이 필요하다면, 버튼의 크기를 px단위로 넣는 것보다는 클래스 속성에 col-6 을 지정하여 가로 크기 결정.

 

 일반적으로 Contatiner는 div 태그를 주로 사용합니다.

 

 그리고 버튼을 하나 배치하더라도 항상 Container를 만들고 그 안에 버튼을 배치해야 FlexBox를 잘 활용할수 있으니까, Item을 사용할때는 무조건 Container 안에 사용합시다.

 

<FlexBox>

 

<template>
  <q-page>
    <!-- Quasar Page -->

    <q-separator class="q-mt-md" />

    <!-- 1 Row Contents -->
    <div class="row bg-secondary">
      <!-- 버튼 하나를 배치하더라도 div의 자식으로 배치-->
      <q-btn class="col-6 bg-primary">A</q-btn> 
    </div>

    <q-separator class="q-my-md" />

    <!-- 2 Row Contents -->
    <div class="row bg-secondary justify-around">
      <q-btn class="col-3 bg-primary">B</q-btn>
      <q-btn class="col-3 bg-primary">C</q-btn>
      <q-btn class="col-3 bg-primary">D</q-btn>
    </div>

    <q-separator class="q-mt-md" />

  </q-page>
</template>

 

 

<FlexBox와 Grid 시스템을 이용한 UI 배치>

 

---

관련 포스트

Quasar UI 개발 1 - 컨트롤러 배치 원칙 - https://dev-leon.tistory.com/61 
Quasar UI 개발 2 - 자주 사용하는 구문 - https://dev-leon.tistory.com/62
Quasar UI 개발 3 - 예시 - https://dev-leon.tistory.com/71
Quasar UI 개발 4 - 심화 예시 - https://dev-leon.tistory.com/64