Проблема с большим размером элемента v-checkbox в Vuetify - PullRequest
Новая
       19

Проблема с большим размером элемента v-checkbox в Vuetify

1 голос
/ 09 мая 2019

Я использую Vuetify в приложении Vue, и я пытаюсь создать комбо флажок / текстовое поле (как показано здесь в документах Vuetify ).Однако, когда я пытаюсь реализовать его в своем приложении, размер элемента флажка велик, и поэтому он создает большой интервал между флажком и текстовым полем:

large space after checkbox

И это разметка, которую я использую: * 

<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>

Онидаже не помещаются на одной строке:

enter image description here

Как мне соединить эти два элемента рядом друг с другом, как впример документов?Проблема заключается в расчете размера самого элемента, а не отступа или поля, поэтому игра с помощью интервалов не имеет значения.

Ответы [ 2 ]

0 голосов
/ 10 мая 2019

Вы можете попробовать обернуть 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>
0 голосов
/ 10 мая 2019

Пробел, появившийся там из-за столбца xs1, поэтому он правильный.

Если вы поместите все в один v-flex, элементы будут с display:block, поэтому он будет в другой строке; чтобы избежать этого, поместите его в v-layout, как показано здесь:

https://vuetifyjs.com/en/components/selection-controls - Флажки - Встроенный в текстовое поле

И используйте класс 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/?&editable=true&editors=101

...