실현하고 싶은 것

Vuetify에서 텍스트 상자와 버튼을 나란히하고 싶습니다.
조금 실현하고 싶은 디자인은 다르지만, 폼의 구성으로서는, 이하의 검색창과 같은 느낌입니다.

텍스트 상자에 입력 후 확대경 아이콘의 버튼을 클릭하여 검색하는 패턴입니다.

실현 방법

입력란에 사용하는 v-text-field 의 append 슬롯을 사용하면 실현할 수 있었습니다.
vuetify의 공식 문서에서는 아이콘 슬롯 로 소개되고 있습니다.



슬롯 append-outer를 사용하여 다음과 같이 양식을 작성합니다.

 <v-text-field
   v-model="message"
   label="Message"
   type="text"
 >
 <template v-slot:append-outer>
   <v-btn color="primary">検索</v-btn>
 </template>
</v-text-field>

이런 느낌이 듭니다.



codepen으로 샘플을 만들었습니다.
여기는 슬롯의 append도 기술해, append-outer 와 비교하고 있습니다.

서두의 검색창과 같이, 텍스트 안에 버튼이 있는 패턴이면, append 슬롯을 지정하는 쪽이 맞습니다. 텍스트와 버튼을 늘어놓을 경우는 append-outer 가 좋네요.

See the Pen Vuetify Example Pen by Shigehiro IDANI ( @1da2 )
on CodePen .

요약

공식 문서의 컴퍼넌트를 바라보고 있어도, 조합 방법이라든가, 어느 정도의 경험이 필요하게 됩니다.

이 유형도 알고 있으면 쉽지만, 모르는 경우 주머니를 찾을 수 없어 시간이 많이 걸리는 패턴이었습니다.