Vuetify의 큰 크기의 v-checkbox 요소 문제

Vuetify의 큰 크기의 v-checkbox 요소 문제

Vue 앱에서 Vuetify를 사용하고 있으며, 체크박스/텍스트필드 콤보(Vuetify docs에 기재되어 있음)를 작성하려고 합니다.그러나 앱에 구현하려고 하면 체크박스 요소의 크기가 커서 체크박스와 텍스트 필드 사이에 큰 공간이 생깁니다.

그리고 이것은 내가 사용하고 있는 마크업입니다.

<v-container grid-list-lg>
  <v-layout row>
    <v-flex xs1>
      <v-checkbox @change="disableText($event, 'alertBackgroundColor')"></v-checkbox>
    </v-flex>
    <v-flex xs4>
      <v-text-field
        v-bind="fields.alertBackgroundColor"
        v-model="templateModel.alertBackgroundColor"
        placeholder="#4A4A4A"
        :disabled="true"
      />
      </v-flex>
      <v-flex xs1>
        <ColorPickerButton
          v-bind:field-name="'alertBackgroundColor'"
          v-bind:init-color="templateModel.alertBackgroundColor"
          v-on:update-color="getUpdatedColor">
        </ColorPickerButton>
      </v-flex>
      <!-- Alert Text Color -->
      <v-flex xs1>
        <v-checkbox @change="disableText($event, 'alertBackgroundColor')"></v-checkbox>
      </v-flex>
      <v-flex xs4>
        <v-text-field
          v-bind="fields.alertTextColor"
          v-model="templateModel.alertTextColor"
          placeholder="#4A4A4A"
          :disabled="true"
        />
      </v-flex>
      <v-flex xs1>
        <ColorPickerButton
          v-bind:field-name="'alertTextColor'"
          v-bind:init-color="templateModel.alertTextColor"
          v-on:update-color="getUpdatedColor"
        ></ColorPickerButton>
      </v-flex>
    </v-layout>
  </v-container>

문서 예를 모방하도록 마크업을 변경하는 경우 다음과 같이 합니다.

<v-container grid-list-lg>
  <v-layout row>
    <v-flex xs5>
      <v-checkbox @change="disableText($event, 'alertBackgroundColor')""></v-checkbox>
      <v-text-field
        v-bind="fields.alertBackgroundColor"
        v-model="templateModel.alertBackgroundColor"
        placeholder="#4A4A4A"
        :disabled="true"
      />
    </v-flex>
    <v-flex xs1>
      <ColorPickerButton
        v-bind:field-name="'alertBackgroundColor'"
        v-bind:init-color="templateModel.alertBackgroundColor"
        v-on:update-color="getUpdatedColor">
      </ColorPickerButton>
    </v-flex>
  </v-layout>
</v-container>

한 줄에 들어가지도 않습니다.

이 두 요소를 문서 예시와 같이 나란히 배치하려면 어떻게 해야 합니까?문제는 요소 자체의 계산된 크기이지 패딩이나 여백이 아니기 때문에 간격 도우미를 사용해도 차이가 없습니다.

포장해 보세요v-checkbox그리고.v-text-field에v-layout

   <v-layout>
      <v-flex xs5>
        <v-layout>
          <v-checkbox v-model="includeFiles" hide-details class="shrink mr-2"></v-checkbox>
          <v-text-field label="Include files"></v-text-field>
        </v-layout>
      </v-flex>
      <v-flex xs1>Test</v-flex>
    </v-layout>

<v-checkbox class="shrink mr-0 mt-0"></v-checkbox>

거기에 나타나는 공간은 xs1 column에 의한 것이므로 맞습니다.

모든 것을 하나의 v-flex에 넣으면 요소는display:block그래서 그것은 다른 줄에 있을 것입니다; 그것을 피하기 위해 그것을 안에 넣습니다.v-layout다음 예시와 같습니다.

https://vuetifyjs.com/en/components/selection-controls - 체크박스 - 텍스트필드와 인라인

또한 class shrink를 사용하여 콘텐츠에 필요한 공간만 사용합니다(https://vuetifyjs.com/en/framework/grid#grow-and-shrink):

<v-layout row wrap>
  <v-checkbox v-model="includeFiles" class="shrink mr-2"></v-checkbox>
  <v-text-field label="Include files"></v-text-field>
</v-layout>

JS

new Vue({
  el: '#app',
  data: () => ({
    includeFiles: true,
    enabled: false
  })
})

사이즈를 가지고 놀고 싶다면xs6다음과 같은 방법으로 수행할 수 있습니다.

<v-layout row wrap>
      <v-flex xs6>
        <v-container fluid pa-0>
          <v-layout row wrap>
            <v-checkbox v-model="includeFiles" class="shrink mr-2"></v-checkbox>
            <v-text-field label="Include files"></v-text-field>
          </v-layout>
        <v-container>
      </v-flex>
    </v-layout>

코드명: https://codepen.io/pen/?""true"101

언급URL : https://stackoverflow.com/questions/56066320/problem-with-large-size-of-v-checkbox-element-in-vuetify