BootstrapVue группа ввода с размером переключателя флажка - PullRequest
Новая
       21

BootstrapVue группа ввода с размером переключателя флажка

0 голосов
/ 31 января 2020

В моем шаблоне есть следующее: 

<b-form-group
  v-for="(field, i) in fields"
  :key="field.id"
  :id="'field_' + field.id"
  :label="field.label"
  label-cols-sm="4"
  label-cols-lg="3"
  label-size="sm"
 >
   <b-input-group size="sm">
     <b-input-group-prepend is-text>
       <b-form-checkbox switch class="mr-n2"></b-form-checkbox>
     </b-input-group-prepend>
     <b-form-input v-model="fields[i].value"></b-form-input>
   </b-input-group>
</b-form-group>

Элемент управления выглядит так:

enter image description here

Переключатель не отображается с размером «sm», поскольку добавляется класс .customer-control:

enter image description here

Есть предложения относительно того, как решить? Я просматривал документацию, но не могу найти то, что мне не хватает.

Спасибо.

1 Ответ

1 голос
/ 31 января 2020

Проверки с пользовательским стилем / рад ios официально не поддерживаются в группах ввода с Bootstrap v4.4 CSS, но вы можете внести некоторые корректировки, используя служебные классы, чтобы приспособиться к этому (как упомянуто в BootstrapVue входные документы группы): 

  <b-input-group size="sm">
    <b-input-group-prepend is-text>
      <b-form-checkbox switch class="mr-n2 mb-n1">
        <span class="sr-only">Switch for following text input</span>
      </b-form-checkbox>
    </b-input-group-prepend>
    <b-form-input aria-label="Text input with switch"></b-form-input>
  </b-input-group>

Приведенное выше значение устанавливает отрицательное нижнее поле для флажка стиля переключателя.

result

...