Флажок формы

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

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

<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 или StringfalseУстанавливает значение атрибута 'aria-invalid' в элементе оболочки. Если не указано, свойство 'state' будет управлять атрибутом
autofocus
BooleanfalseЕсли установлено значение `true`, пытается автоматически сфокусировать элемент управления, когда он установлен, или повторно активировать, когда находится в состоянии активности. Не устанавливает атрибут `autofocus` на элементе управления
button-variant
StringОпределяет вариант контекстной цветовой темы Bootstrap, применяемый к флажкам стиля кнопки
buttons
BooleanfalseКогда установлено, отображает флажки в этой группе с помощью стиля кнопки
checked
v-model
Array[]Текущее значение отмеченных флажков в группе. Должен быть массив, если есть несколько флажков
disabled
BooleanfalseЕсли установлено значение `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
BooleanfalseВизуализируйте элемент управления формы в обычном режиме, а не в режиме пользовательского стиля
required
BooleanfalseДобавляет атрибут `required` в элемент управления формы
size
StringУстановите размер внешнего вида компонента. 'sm', 'md' (по умолчанию) или 'lg'
stacked
BooleanfalseЕсли установлено, отображает группу флажков в режиме с накоплением
state
BooleannullУправляет внешним видом состояния проверки компонента. `true` для действительного, `false` для недопустимого или `null` для отсутствия проверки состояния
switches
BooleanfalseЕсли установлено, отображает флажки в группе со стилем переключателя
text-field
String'text'Имя поля в массиве `options`, которое следует использовать для текстовой метки
validated
BooleanfalseЕсли установлено, добавляет класс Bootstrap 'was-validated' в оболочку группы
value-field
String'value'Имя поля в массиве `options`, которое следует использовать для значения

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

v-model

Свойство
Событие
checkedinput

Слоты

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

События

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

<b-form-checkbox>

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

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

  • <b-checkbox>
  • <b-check>

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

Свойства

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

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

v-model

Свойство
Событие
checkedinput

Слоты

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

События

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

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

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

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

Пример:

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

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

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

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

Пример:

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