vuetify component의 input, button 사용할 때 길이 조정하기

vuetify input이나 button 컴포넌트를 사용할 때는 길이가 길게 나온다.

이를 위해서는 vuetify 의 그리드 시스템과 레이아웃 유틸리티 클래스를 활용하여 레이아웃을 조정할 수 있다.

 

1. vuetify 의 그리드 시스템 사용하기 ( v-row, v-col )

vuetify는 Flexbox 기반 그리드 시스템을 제공하므로, v-row, v-col을 사용해 레이아웃을 조정한다.

 

• 기본 사용 코드

<v-text-field label="Label"></v-text-field>

• 화면

vuetify text field 기본 코드

• vuetify 그리드 시스템 사용하기

<v-container>
    <v-row>
        <v-col cols="12" sm="6" md="4">
            <v-text-field label="Label"></v-text-field>
        </v-col>
    </v-row>                
</v-container>

• 화면

vuetify 그리드 시스템 적용

설명

v-col 의 cols, sm, md 속성 사용 사용

1. cols="12"
   모바일 크기에서 전체 너비를 사용
2. sm="6"
   작은 화면에서는 50%
3. md="4"
   더 큰 화면에서는 1/3 크기만 차지하게 설정

☞ 참고

https://vuetifyjs.com/en/api/v-col/

https://vuetifyjs.com/en/api/v-col/

2. vuetify 유틸리티 클래스 사용

간단하게 레이아웃을 조정할 수 있는 유틸리티 클래스를 사용하여 길이 조정

• 코드

<v-container>
    <v-row>
        <v-text-field class="ma-2" label="Label" style="max-width: 300px;" />
    </v-row>
</v-container>

• 화면

vuetify 유틸리티 클래스 사용

설명

1. class="ma-2"
   margin을 적용하는 vuetify의 유틸리티 클래스.
2. style="max-width: 300px;"
   인라인 스타일로 최대 너비를 제한하여 컴포넌트가 너무 길게 나오는 문제 해결

☞ 참고
https://v15.vuetifyjs.com/ko/framework/spacing/

Spacing helpers — Vuetify.js

3. 속성으로 너비 조정 (full-width, width 속성)

버튼 컴포넌트인 b-btn에는 block이나 full-width 속성이 있으며, 이를 활용해 버튼이 너무 넓게 나오는 것을 방지할 수 있다.

• 코드

<v-container>
    <v-row>
        <v-btn block>Button</v-btn>
    </v-row>
    <v-row><br></v-row>
    <v-row>                    
        <v-btn width="300px">Button</v-btn>
    </v-row>
</v-container>

• 화면

vuetify v-btn 속성

설명

1. block
   버튼이 부모의 너비를 채우는 대신 적당한 크기로 조정된다.
2. width
   속성을 사용해 버튼의 고정 너비를 설정한다.