Vuetify - 양식에서 왼쪽 라벨 텍스트와 오른쪽 텍스트 필드를 수행하는 방법

Vuetify - 양식에서 왼쪽 라벨 텍스트와 오른쪽 텍스트 필드를 수행하는 방법

왼쪽 라벨과 오른쪽 텍스트 필드를 vuetify로 하고 싶습니다.

vuetify 홈페이지 사용에 있어서 라벨과 텍스트 필드 양식은 필수가 아닙니다.

<v-text-field
    v-model="firstname"
    label="First name">
</v-text-field>

나는 왼쪽 라벨과 오른쪽 텍스트 필드를 vuetify 형식으로 원합니다.

v-subheader를 사용하는 것은 어떻습니까?텍스트 필드 컨테이너에서 텍스트 필드 레이블을 설정하고 왼쪽에 정렬할 수 있는 받침이 없기 때문입니다.

  <v-layout row>
    <v-flex xs1>
      <v-subheader>Label here</v-subheader>
    </v-flex>
    <v-flex xs2>
      <v-text-field
      ></v-text-field>
    </v-flex>
  </v-layout>

코드펜 링크는 이쪽입니다.

평판이 좋지 않아서 코멘트를 할 수 없기 때문입니다.v-subheader에 class="my-4"를 추가하여 수평 정렬할 수 있습니다.숫자가 클수록 라벨이 낮아집니다.

아래의 Riddhi 샘플을 사용했습니다.

<v-layout row>
    <v-flex xs1>
      <v-subheader class="my-4">Label</v-subheader>
    </v-flex>
    <v-flex xs2>
      <v-text-field
      ></v-text-field>
    </v-flex>
 </v-layout>

vuetify 버전 2.5.8

<v-row dense>
  <v-col cols="12" md="2">
    <v-list-item-content>Label</v-list-item-content>
  </v-col>
  <v-col cols="12" md="10">
    <v-text-field dense clearable></v-text-field>
  </v-col>
</v-row>

언급URL : https://stackoverflow.com/questions/56235432/vuetify-how-to-do-label-text-left-and-text-field-right-on-form