작성
·
169
0
안녕하세요
q-span과 q-input을 나란히 배치하는 UI를 만들고 있습니다.
세로 중앙정렬을 위해서 Container에 item-center 옵션을 사용하고 있는데, q-input에 :rules 속성만 주면 중앙 정렬이 깨지네요.
어떻게 해야 세로 중앙정렬이 가능할까요?
아래는 제가 시도해본 4가지 상황입니다.
ps. 글쓰는거 코드랑 함께 넣는거 어렵네요. ㅠㅠ
<template>
<q-page>
<!-- 유효성 검사 없이 items-center -->
<div class="row q-mt-md bg-primary">
<div class="row full-width items-center">
<q-span class="text-h6 col-3" align="right">신청자</q-span>
<q-span class="col-1"></q-span>
<q-input class="" dense outlined v-model="userName" />
</div>
</div>
<!-- 유효성 검사와 items-center 모두 없음 -->
<div class="row q-mt-md bg-primary">
<div class="row full-width">
<q-span class="text-h6 col-3" align="right">신청자</q-span>
<q-span class="col-1"></q-span>
<q-input class="" dense outlined v-model="userName" />
</div>
</div>
<!-- 유효성 검사와 items-center 모두 존재-->
<div class="row q-mt-md bg-primary">
<div class="row full-width items-center">
<q-span class="text-h6 col-3" align="right">신청자</q-span>
<q-span class="col-1"></q-span>
<q-input class="" dense outlined v-model="userName" :rules="['text']" />
</div>
</div>
<!-- 유효성 검사 존재하고 items-center 없을 경우 -->
<div class="row q-mt-md bg-primary">
<div class="row full-width">
<q-span class="text-h6 col-3" align="right">신청자</q-span>
<q-span class="col-1"></q-span>
<q-input class="" dense outlined v-model="userName" :rules="['text']" />
</div>
</div>
</q-page>
</template>
답변 1
0
안녕하세요.
답변) Flex Container와 Flex Item 을 위한 요소 추가
<div class="row q-mt-md bg-primary">
<div class="row full-width items-center">
<div class="col-3"> <!-- Flex Item을 위한 요소 추가 -->
<q-span class="text-h6" align="right">신청자</q-span>
</div>
<div class="col-1">
<q-span></q-span>
</div>
<div class="col">
<q-input class="" dense outlined v-model="userName" />
</div>
</div>
</div>
PS. <q-span>
컴포넌트는 따로 정의하신 컴포넌트일까요? 퀘이사 스펙에서 제공하지 않는 컴포넌트여서요.
<q-span> 컴포넌트는 chat-gpt로 함께 작업하다가 나온 키워드로써, 지금까지 이것으로 작업했었는데 문제없이 동작이 되어서 당연히 존재하는 건지 알았습니다.
하지만 공식홈페이지 가보니까 저런 컴포넌트는 존재하지 않아서 <span>으로 변경하는것이 맞습니다.
그런데 희안하게 <span>과 <q-span>은 동일하게 동작합니다.
그리고 제가 질문을 애매하게 드린거 같은데, q-input에 :rules가 함께 존재할때 세로 중앙정렬을 하고 싶다는 것이었습니다.
보내주신 답변을 보니까, :rules 속성이 존재하지 않을때의 UI입니다.
:rule가 포함된 q-input의 세로 중앙 정렬을 하고 싶습니다.