화면 중앙 정렬
로그인 화면은 화면의 가운데에 입력을 받게 만드는데, 이때 필요한게 화면 중앙정렬입니다.
중앙정렬은 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
'Web > Quasar' 카테고리의 다른 글
Quasar App의 생명주기와 저장소별 생명주기 (0) | 2024.05.03 |
---|---|
Quasar용 SessionStorage, LocalStorage 사용하기 (0) | 2024.05.03 |
Quasar UI 개발 3 - 예시 (0) | 2024.04.29 |
Quasar UI 개발 2 - 자주 사용하는 구문 (0) | 2024.04.29 |
Quasar UI 개발 1 - 컨트롤러 배치 원칙 (0) | 2024.04.29 |