Флажок формы

Для согласованности между браузерами, <b-form-checkbox-group> и <b-form-checkbox> используют ввод настраиваемого флажка Bootstrap вместо ввода флажка по умолчанию в браузере. Он построен на основе семантической и доступной разметки, поэтому является надежной заменой для ввода флажка по умолчанию.

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

`<b-form-checkbox-group>`

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

<b-form-checkbox-group> Псевдонимы компонентов
<b-form-checkbox-group> Свойства
<b-form-checkbox-group> v-model
<b-form-checkbox-group> Слоты
<b-form-checkbox-group> События

Псевдонимы компонентов

<b-form-checkbox-group> также может использоваться через следующие псевдонимы:

<b-checkbox-group>
<b-check-group>

Примечание: Псевдонимы компонентов доступны только при импорте всего BootstrapVue или при использовании подключаемого модуля группы компонентов.

Свойства

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

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`aria-invalid`	`Boolean` или `String`	`false`	Устанавливает значение атрибута 'aria-invalid' в элементе оболочки. Если не указано, свойство 'state' будет управлять атрибутом
`autofocus`	`Boolean`	`false`	Если установлено значение `true`, пытается автоматически сфокусировать элемент управления, когда он установлен, или повторно активировать, когда находится в состоянии активности. Не устанавливает атрибут `autofocus` на элементе управления
`button-variant`	`String`		Определяет вариант контекстной цветовой темы Bootstrap, применяемый к флажкам стиля кнопки
`buttons`	`Boolean`	`false`	Когда установлено, отображает флажки в этой группе с помощью стиля кнопки
`checked` v-model	`Array`	`[]`	Текущее значение отмеченных флажков в группе. Должен быть массив, если есть несколько флажков
`disabled`	`Boolean`	`false`	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
`disabled-field`	`String`	`'disabled'`	Имя поля в массиве `options`, которое следует использовать для отключенного состояния
`form`	`String`		Идентификатор формы, к которой принадлежит элемент управления формой. Устанавливает атрибут `form` в элементе управления
`html-field` Использовать с осторожностью	`String`	`'html'`	Имя поля в массиве `options`, которое следует использовать для html-метки вместо текстового поля
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`name`	`String`		Устанавливает значение атрибута `name` в элементе управления формы
`options`	`Array` или `Object`	`[]`	Массив элементов для визуализации в компоненте
`plain`	`Boolean`	`false`	Визуализируйте элемент управления формы в обычном режиме, а не в режиме пользовательского стиля
`required`	`Boolean`	`false`	Добавляет атрибут `required` в элемент управления формы
`size`	`String`		Установите размер внешнего вида компонента. 'sm', 'md' (по умолчанию) или 'lg'
`stacked`	`Boolean`	`false`	Если установлено, отображает группу флажков в режиме с накоплением
`state`	`Boolean`	`null`	Управляет внешним видом состояния проверки компонента. `true` для действительного, `false` для недопустимого или `null` для отсутствия проверки состояния
`switches`	`Boolean`	`false`	Если установлено, отображает флажки в группе со стилем переключателя
`text-field`	`String`	`'text'`	Имя поля в массиве `options`, которое следует использовать для текстовой метки
`validated`	`Boolean`	`false`	Если установлено, добавляет класс Bootstrap 'was-validated' в оболочку группы
`value-field`	`String`	`'value'`	Имя поля в массиве `options`, которое следует использовать для значения

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

`v-model`

Свойство	Событие
`checked`	`input`

Слоты

Наименование	Описание
`default`	Контент (флажки формы) для размещения в группе флажков формы
`first`	Слот для размещения b-form-checks, чтобы они появлялись перед проверками, созданными из опций опций

События

Событие	Аргументы	Описание
`change`	`checked` - Значение флажков. Значение будет массивом	Генерируется, когда выбранное значение изменяется из-за взаимодействия с пользователем
`input`	`checked` - Значение флажков. Значение будет массивом	Генерируется при изменении отмеченного значения

`<b-form-checkbox>`

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

<b-form-checkbox> Псевдонимы компонентов
<b-form-checkbox> Свойства
<b-form-checkbox> v-model
<b-form-checkbox> Слоты
<b-form-checkbox> События

Псевдонимы компонентов

<b-form-checkbox> также может использоваться через следующие псевдонимы:

<b-checkbox>
<b-check>

Свойства

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

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`aria-label`	`String`		Устанавливает значение атрибута `aria-label` для отображаемого элемента
`aria-labelledby`	`String`		Идентификатор элемента, который предоставляет метку для этого компонента. Используется как значение атрибута `aria-labelledby`
`autofocus`	`Boolean`	`false`	Если установлено значение `true`, пытается автоматически сфокусировать элемент управления, когда он установлен, или повторно активировать, когда находится в состоянии активности. Не устанавливает атрибут `autofocus` на элементе управления
`button`	`Boolean`	`false`	Когда установлено, отображает флажок в виде кнопки
`button-variant`	`String`		Применяется к цветам темы Bootstrap в режиме 'button'
`checked` v-model	`Any`	`null`	Текущее значение флажка (-ов). Должен быть массив, если к одной v-model привязано несколько флажков
`disabled`	`Boolean`	`false`	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
`form`	`String`		Идентификатор формы, к которой принадлежит элемент управления формой. Устанавливает атрибут `form` в элементе управления
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`indeterminate`	`Boolean`	`false`	Переводит флажок в неопределенное состояние. Синхронизация с помощью модификатора .sync
`inline`	`Boolean`	`false`	Если установлено, отображает флажок как встроенный элемент, а не как блок шириной 100%
`name`	`String`		Устанавливает значение атрибута `name` в элементе управления формы
`plain`	`Boolean`	`false`	Визуализируйте элемент управления формы в обычном режиме, а не в режиме пользовательского стиля
`required`	`Boolean`	`false`	Добавляет атрибут `required` в элемент управления формы
`size`	`String`		Установите размер внешнего вида компонента. 'sm', 'md' (по умолчанию) или 'lg'
`state`	`Boolean`	`null`	Управляет внешним видом состояния проверки компонента. `true` для действительного, `false` для недопустимого или `null` для отсутствия проверки состояния
`switch`	`Boolean`	`false`	Когда установлено, отображает флажок в виде переключателя
`unchecked-value`	`Any`	`false`	Значение, возвращаемое, когда этот флажок снят. Примечание не применимо, если несколько флажков привязаны к одному и тому же массиву v-model
`value`	`Any`	`true`	Значение, возвращаемое, когда этот флажок установлен

`v-model`

Свойство	Событие
`checked`	`input`

Слоты

Наименование	Описание
`default`	Флажок для размещения в форме

События

Событие	Аргументы	Описание
`change`	`checked` - Значение флажка(ов). При привязке к нескольким флажкам значение будет массивом	Генерируется, когда выбранное значение изменяется из-за взаимодействия с пользователем
`input`	`checked` - Значение флажка(ов). При привязке к нескольким флажкам значение будет массивом	Генерируется при изменении выбранного значения (значений)

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

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

Компонент	Именованный экспорт	Путь импорта
`<b-form-checkbox-group>`	`BFormCheckboxGroup`	`bootstrap-vue`
`<b-form-checkbox>`	`BFormCheckbox`	`bootstrap-vue`

Пример:

import { BFormCheckboxGroup } from 'bootstrap-vue'
Vue.component('b-form-checkbox-group', BFormCheckboxGroup)

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

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

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

Пример:

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