Группа ввода

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.

<div>
  <!-- Использование свойств -->
  <b-input-group size="lg" prepend="$" append=".00">
    <b-form-input></b-form-input>
  </b-input-group>

  <!-- Использование слотов -->
  <b-input-group class="mt-3">
    <template #append>
      <b-input-group-text><strong class="text-danger">!</strong></b-input-group-text>
    </template>
    <b-form-input></b-form-input>
  </b-input-group>

  <!-- Использование компонентов -->
  <b-input-group prepend="Username" class="mt-3">
    <b-form-input></b-form-input>
    <b-input-group-append>
      <b-button variant="outline-success">Кнопка</b-button>
      <b-button variant="info">Кнопка</b-button>
    </b-input-group-append>
  </b-input-group>
</div>

<!-- b-input-group.vue -->

Использование

Вы можете прикреплять надстройки, используя свойства, именованные слоты и/или субкомпоненты.

Использование свойств `prepend` и `append`

Значения будут внутренне заключены в <b-input-group-text> для правильного отображения.

<div>
  <b-input-group prepend="$" append=".00">
    <b-form-input></b-form-input>
  </b-input-group>

  <b-input-group prepend="0" append="100" class="mt-3">
    <b-form-input type="range" min="0" max="100"></b-form-input>
  </b-input-group>
</div>

<!-- b-input-group-using-props.vue -->

Использование именованных слотов

Если вы хотите лучше контролировать надстройки, вы можете использовать вместо них слоты prepend и append.

Содержимое слота будет автоматически заключено в <b-input-group-prepend> или <b-input-group-append> для правильного отображения.

<div>
  <b-input-group>
    <template #prepend>
      <b-input-group-text>Имя пользователя</b-input-group-text>
    </template>
    <b-form-input></b-form-input>

    <template #append>
      <b-dropdown text="Выпадающий список" variant="success">
        <b-dropdown-item>Действие A</b-dropdown-item>
        <b-dropdown-item>Действие B</b-dropdown-item>
      </b-dropdown>
    </template>
  </b-input-group>
</div>

<!-- b-input-group-using-slots.vue -->

Использование подкомпонентов

Используйте <b-input-group-prepend> или <b-input-group-append> для добавления произвольных надстроек, где хотите, и используйте эти компоненты для группировки кнопок в вашей группе ввода. Отдельные кнопки всегда должны быть обернуты этими компонентами для правильного стиля.

<div>
  <b-input-group>
    <b-input-group-prepend>
      <b-button variant="outline-info">Кнопка</b-button>
    </b-input-group-prepend>

    <b-form-input type="number" min="0.00"></b-form-input>

    <b-input-group-append>
      <b-button variant="outline-secondary">Кнопка</b-button>
      <b-button variant="outline-primary">Кнопка</b-button>
      <b-input-group-text>
        <b-icon icon="x" />
      </b-input-group-text>
    </b-input-group-append>
  </b-input-group>
</div>

<!-- b-input-group-addons-placement.vue -->

Установите свойство is-text в <b-input-group-prepend> или <b-input-group-append>, если содержимое является текстовым по своей природе, чтобы применить правильный стиль. В качестве альтернативы поместите подкомпонент <b-input-group-text> внутри <b-input-group-prepend> или <b-input-group-append>. Это также применимо, когда вы хотите использовать один из иконок BootstrapVue.

Поддерживаемые формы-элементы управления

Следующие элементы управления формами поддерживаются в качестве входного главного элемента входной группы:

Примечания:

BootstrapVue использует пользовательский SCSS/CSS для обработки размера ввода <b-form-file>, когда он помещается в <b-input-group>, который имеет size.
BootstrapVue использует пользовательский SCSS/CSS, когда <b-form-input type="range"> помещается в <b-input-group>.
Пользовательские компоненты BootstrapVue (например, <b-form-spinbutton>, <b-form-rating>, <b-form-tags> и т. д.) Требуют настраиваемого SCSS/CSS BootstrapVue.

Аддоны флажок и радио

Поместите любой флажок или переключатель в надстройку группы ввода вместо текста.

Примечание: Bootstrap v4.x рекомендует использовать встроенные радиомодули и входы флажков вместо настраиваемых радиомодулей и флажков, но можно использовать как <b-form-radio> и <b-form-checkbox> с применено несколько служебных классов.

Нативные аддоны флажок и радио

<div>
  <b-input-group class="mb-2">
    <b-input-group-prepend is-text>
      <input type="checkbox" aria-label="Флажок для следующего ввода текста">
    </b-input-group-prepend>
    <b-form-input aria-label="Ввод текста с флажком"></b-form-input>
  </b-input-group>

  <b-input-group>
    <b-input-group-prepend is-text>
      <input type="radio" aria-label="Радио для последующего ввода текста">
    </b-input-group-prepend>
    <b-form-input aria-label="Ввод текста с радио-вводом"></b-form-input>
  </b-input-group>
</div>

<!-- b-input-group-checks-radios.vue -->

Пользовательские аддоны радио, флажки и переключатели

Использование компонентов <b-form-checkbox> и <b-form-radio> в качестве надстроек, использование Bootstrap служебных классов для дополнительной стилизации, чтобы они "соответствовали" в аддоне:

<div>
  <b-input-group class="mb-2">
    <b-input-group-prepend is-text>
      <b-form-checkbox class="mr-n2">
        <span class="sr-only">Флажок для следующего ввода текста</span>
      </b-form-checkbox>
    </b-input-group-prepend>
    <b-form-input aria-label="Ввод текста с флажком"></b-form-input>
  </b-input-group>

  <b-input-group class="mb-2">
    <b-input-group-prepend is-text>
      <b-form-radio class="mr-n2">
        <span class="sr-only">Радио для последующего ввода текста</span>
      </b-form-radio>
    </b-input-group-prepend>
    <b-form-input aria-label="Ввод текста с радио-вводом"></b-form-input>
  </b-input-group>

  <b-input-group>
    <b-input-group-prepend is-text>
      <b-form-checkbox switch class="mr-n2">
        <span class="sr-only">Переключиться на следующий ввод текста</span>
      </b-form-checkbox>
    </b-input-group-prepend>
    <b-form-input aria-label="Ввод текста с переключателем"></b-form-input>
  </b-input-group>
</div>

<!-- b-input-group-custom-checks-radios.vue -->

В приведенном выше примере мы использовали класс .sr-only в <span>, чтобы визуально скрыть содержимое метки настраиваемого элемента управления (при этом сделав его доступным для пользователей программ чтения с экрана), и использовали служебный класс .mr-n2, чтобы добавить отрицательное правое поле, чтобы компенсировать "промежуток" между элементом управления и скрытой меткой.

Мультивводы

<div>
  <b-input-group prepend="Имя и фамилия" class="mb-2">
    <b-form-input aria-label="Имя"></b-form-input>
    <b-form-input aria-label="Фамилия"></b-form-input>
  </b-input-group>
</div>

<!-- input-group-multiple-inputs.vue -->

Множественные дополнения

Поддерживаются несколько надстроек, которые можно комбинировать с версиями флажков и радиовходов.

<div>
  <b-input-group prepend="Item">
    <b-input-group-prepend is-text>
      <input type="checkbox" aria-label="Флажок для следующего ввода текста">
    </b-input-group-prepend>
    <b-input-group-prepend is-text><b>$</b></b-input-group-prepend>
    <b-form-input type="number" aria-label="Ввод текста с флажком"></b-form-input>
  </b-input-group>
</div>

<!-- b-input-group-multiple-addons.vue -->

Выпадающие дополнения

<div>
  <b-input-group>
    <template #prepend>
      <b-dropdown text="Выпадающий список" variant="info">
        <b-dropdown-item>Действие A</b-dropdown-item>
        <b-dropdown-item>Действие B</b-dropdown-item>
      </b-dropdown>
    </template>

    <b-form-input></b-form-input>

    <template #append>
      <b-dropdown text="Выпадающий список" variant="outline-secondary" v-for="i in 2" :key="i">
        <b-dropdown-item>Действие C</b-dropdown-item>
        <b-dropdown-item>Действие D</b-dropdown-item>
      </b-dropdown>
    </template>
  </b-input-group>
</div>

<!-- b-input-group-dropdown.vue -->

Размеры элементов

Установите высоту, используя свойство size, на sm или lg для маленьких или больших соответственно. Нет необходимости устанавливать размер отдельных входов или кнопок. Обратите внимание, однако, что вам обязательно также установить размер в раскрывающихся списках.

<div>
  <b-input-group
    v-for="size in ['sm','','lg']"
    :key="size"
    :size="size"
    class="mb-3"
    prepend="Метка"
  >
    <b-form-input></b-form-input>
    <b-input-group-append>
      <b-button size="sm" text="Кнопка" variant="success">Кнопка</b-button>
    </b-input-group-append>
  </b-input-group>
</div>

<!-- b-input-group-size.vue -->

Чтобы контролировать ширину, поместите ввод внутри стандартного столбца сетки Bootstrap.

Настройка настраиваемого радио, флажка и переключателей аддонов

При использовании <b-form-radio> или <b-form-checkbox> в качестве дополнений могут потребоваться дополнительные служебные классы, чтобы все подходило правильно, в зависимости от выбранного размера:

<div>
  <b-input-group size="sm" prepend="Small" class="mb-2">
    <b-form-input aria-label="Ввод небольшого текста с настраиваемым переключателем"></b-form-input>
    <b-input-group-append is-text>
      <b-form-checkbox switch class="mr-n2 mb-n1">
        <span class="sr-only">Флажок для предыдущего ввода текста</span>
      </b-form-checkbox>
    </b-input-group-append>
  </b-input-group>

  <b-input-group size="lg" prepend="Large" class="mb-2">
    <b-form-input aria-label="Большой ввод текста с переключателем"></b-form-input>
    <b-input-group-append is-text>
      <b-form-checkbox switch class="mr-n2">
        <span class="sr-only">Переключатель к предыдущему вводу текста</span>
      </b-form-checkbox>
    </b-input-group-append>
  </b-input-group>
</div>

<!-- b-input-group-custom-checks-radios-sizing.vue -->

В частности, при использовании размера sm в <b-input-group> вам нужно будет добавить отрицательное нижнее поле, используя .mb-n1 класс утилит.

Контекстные состояния

Bootstrap v4 в настоящее время не поддерживает контекстную стилизацию состояния (т.е. допустимую или недопустимую) групп ввода. Однако входы внутри группы ввода действительно поддерживают контекстное состояние.

Справочник по компонентам

`<b-input-group>`

Функциональный компонент

Смотреть источник

<b-input-group> Свойства
<b-input-group> Слоты

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство	Тип	По умолчанию	Описание
`append`	`String`		Текст, добавляемый после группы ввода
`append-html` Использовать с осторожностью	`String`		Строка HTML для добавления после группы ввода. Имеет приоритет над свойством 'append'
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`prepend`	`String`		Текст, добавляемый перед группой ввода
`prepend-html` Использовать с осторожностью	`String`		Строка HTML для добавления перед группой ввода. Имеет приоритет над свойством 'prepend'
`size`	`String`		Установите размер внешнего вида компонента. 'sm', 'md' (по умолчанию) или 'lg'
`tag`	`String`	`'div'`	Указывает тег HTML для отображения вместо тега по умолчанию

Осторожно: Свойства, поддерживающие HTML-строки (*-html) может быть уязвим для Атаки межсайтового скриптинга (XSS) при передаче необработанных значений, предоставленных пользователем. Вы должны правильно очищать ввод пользователя!

Слоты

Наименование	Описание
`append`	Вложение после
`default`	Контент для размещения в группе ввода
`prepend`	Вложение перед

`<b-input-group-prepend>`

Функциональный компонент

Смотреть источник

<b-input-group-prepend> Свойства
<b-input-group-prepend> Слоты

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство	Тип	По умолчанию	Описание
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`is-text`	`Boolean`	`false`	Когда 'true', содержимое оборачивается в компонент b-input-group-text
`tag`	`String`	`'div'`	Указывает тег HTML для отображения вместо тега по умолчанию

Слоты

Наименование	Описание
`default`	Содержимое для размещения в группе ввода до

`<b-input-group-append>`

Функциональный компонент

Смотреть источник

<b-input-group-append> Свойства
<b-input-group-append> Слоты

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство	Тип	По умолчанию	Описание
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`is-text`	`Boolean`	`false`	Когда 'true', содержимое оборачивается в компонент b-input-group-text
`tag`	`String`	`'div'`	Указывает тег HTML для отображения вместо тега по умолчанию

Слоты

Наименование	Описание
`default`	Содержимое для размещения в группе ввода после

`<b-input-group-text>`

Функциональный компонент

Смотреть источник

<b-input-group-text> Свойства
<b-input-group-text> Слоты

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство	Тип	По умолчанию	Описание
`tag`	`String`	`'div'`	Указывает тег HTML для отображения вместо тега по умолчанию

Слоты

Наименование	Описание
`default`	Контент для размещения в тексте группы ввода

`<b-input-group-addon>`

Функциональный компонент

Смотреть источник

<b-input-group-addon> Свойства
<b-input-group-addon> Слоты

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство	Тип	По умолчанию	Описание
`append`	`Boolean`	`false`	Если установлено значение 'true', аддон добавляется после. По умолчанию - 'false', которое добавляется в начало
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`is-text`	`Boolean`	`false`	Когда 'true', содержимое оборачивается в компонент b-input-group-text
`tag`	`String`	`'div'`	Указывает тег HTML для отображения вместо тега по умолчанию

Слоты

Наименование	Описание
`default`	Контент для размещения в надстройке группы ввода

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент	Именованный экспорт	Путь импорта
`<b-input-group>`	`BInputGroup`	`bootstrap-vue`
`<b-input-group-prepend>`	`BInputGroupPrepend`	`bootstrap-vue`
`<b-input-group-append>`	`BInputGroupAppend`	`bootstrap-vue`
`<b-input-group-text>`	`BInputGroupText`	`bootstrap-vue`
`<b-input-group-addon>`	`BInputGroupAddon`	`bootstrap-vue`

Пример:

import { BInputGroup } from 'bootstrap-vue'
Vue.component('b-input-group', BInputGroup)

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт	Путь импорта
`InputGroupPlugin`	`bootstrap-vue`

Пример:

import { InputGroupPlugin } from 'bootstrap-vue'
Vue.use(InputGroupPlugin)

Использование

Использование свойств prepend и append

Использование именованных слотов

Использование подкомпонентов

Поддерживаемые формы-элементы управления

Аддоны флажок и радио

Нативные аддоны флажок и радио

Пользовательские аддоны радио, флажки и переключатели

Мультивводы

Множественные дополнения

Выпадающие дополнения

Размеры элементов

Настройка настраиваемого радио, флажка и переключателей аддонов

Контекстные состояния

Справочник по компонентам

Свойства

Слоты

Свойства

Слоты

Свойства

Слоты

Свойства

Слоты

Свойства

Слоты

Импорт отдельных компонентов

Импортировать как плагин Vue.js

Использование свойств `prepend` и `append`