Quasar UI 개발 4 - 심화 예시

화면 중앙 정렬

 로그인 화면은 화면의 가운데에 입력을 받게 만드는데, 이때 필요한게 화면 중앙정렬입니다.

 중앙정렬은 q-page 태그에 flex flex-center 속성을 주면 가능합니다.

  <q-page class="flex flex-center">
    <q-btn class="q-mt-md"> Click Me! </q-btn>
  </q-page>

 

이미지를 백그라운드에 배치하기

 사이트를 예쁘게 꾸미려고 백그라운드에 이미지를 넣는데, 일반적인 Grid 시스템으로는 어렵습니다. 

 여기서는 absolute-full flex flex-center 구문을 이용하여 처리해 보겠습니다.

 

<template>
  <q-page>
    <div>
      <!-- height: 100vh 스타일로 세로 크기를 맞추고 가로는 fit="cover"로 동적으로 변함 -->
      <q-img src="/EmptyDesk.jpg" fit="cover" style="height: 100vh">
         <!-- 스크린 사이즈 기준으로 화면 가운데에 container 하나 넣음 -->
        <div class="absolute-full flex flex-center">
          <!-- min-width: 400px 스타일로 최소 가로 크기를 지정해야 items가 적절히 나옴 -->
          <div class="row justify-center" style="min-width: 400px">
            <h2 class="text-bold">Echo Test</h2>
            <q-btn
              label="Echo Test"
              class="q-mt-md bg-primary full-width"
              @click="onClickEcho"
            />
          </div>
        </div>
      </q-img>
    </div>
  </q-page>
</template>

 

 

Gutter-Col와 Col-Size 함께 사용하기

 Items의 col-size를 12에 맞게 설정하면 빈틈없이 딱맞게 들어갑니다.

 그런데 이때 Items 사이에 간격을 주면 마지막 Item이 줄바꿈이 되어버립니다.

 이를 해결하기 위해서 Contatiner에 "q-col-gutter-[방향]-[크기]" 속성을 주면 해당 기능이 가능해 집니다.

 그런데 공식 가이드에 따르면 col-gutter를 사용하려면 Items의 항목을 div 태그로 한번 더 감싸서 사용해야 한다고 하네요.

 그리고 만일  Item이 버튼이라면 버튼 속성에 "full-width" 속성까지 부여해야 우리가 원하는 형태의 배치가 이루어집니다.

    <div class="row q-col-gutter-md">
      <div class="col-4" v-for="n in 6" :key="n">
        <q-btn class="full-width bg-primary">col-4</q-btn>
      </div>
    </div>

 

 

---

관련 포스트

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