[ Quasar ] q-select에 placeholder 적용하기

목표

Input, Date, Select의 placeholder 스타일을 통일하고자 했다. (박스 가운데, 회색 글씨)

그러나 q-select의 경우 q-input과 달리 placeholder 속성이 존재하지 않는다.

 

대신 label이 placeholder의 역할을 대신하고 있지만, 조금 다르게 동작한다.

• placeholder는 사용자가 입력을 시작하면 숨겨짐
• label은 사용자가 선택을 시작하면 상단으로 이동함

 

 

q-select에서 placeholder를 사용하고 싶다면 use-input prop을 사용하면 되지만, selectBox에 사용자 입력을 받지 않을거라면 사용하지 않는 편이 좋다.

 

따로 국밥

다만 use-input만 단일로 사용하게 되면 다음과 같이 input과 select가 따로 노는 상황이 발생하기 때문에 hide-selected 와 fill-input 을 함께 사용해줘야 한다.

 

hide-selected & fill-input

 

---

 

구현

결론적으로 q-select에서 placeholder 역할을 위해 label을 사용했다.

대신 다른 input 들과의 디자인 통일성을 위해, label의 CSS를 커스텀해서 q-input의 placeholder와 같은 모양으로 만들었다.

• 사용자 클릭 후에는 label이 상단으로 올라가는 것이 아니라 숨김 처리 되도록 했다.

  :deep(.q-field--float) {
    .q-field__label {
      display: none;
    }
  }
  :deep(.q-field__label) {
    top: 6px;
  }
  :deep(.q-field__control-container) {
    padding-top: 0 !important;
  }

 

 

---

 

결과

q-input의 placeholder와 동일한 스타일로 label을 이용한 placeholder 제작