Радио ввод формы

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

Индивидуальные радио

<template>
  <div>
    <b-form-group label="Индивидуальные радио" v-slot="{ ariaDescribedby }">
      <b-form-radio v-model="selected" :aria-describedby="ariaDescribedby" name="some-radios" value="A">Option A</b-form-radio>
      <b-form-radio v-model="selected" :aria-describedby="ariaDescribedby" name="some-radios" value="B">Option B</b-form-radio>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: ''
      }
    }
  }
</script>

<!-- b-form-radio.vue -->

Сгруппированные радио

Отдельные радио-вводы в <b-form-radio-group> могут быть указаны с помощью свойства options или путем ручного размещения подкомпонента <b-form-radio>. При использовании вручную размещенных компонентов <b-form-radio> внутри <b-form-radio-group>, они унаследуют большинство свойств и v-model от <b-form-radio-group>.

<template>
  <div>
    <b-form-group label="Radios using options" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="radio-group-1"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-options"
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Radios using sub-components" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="radio-group-2"
        v-model="selected"
        :aria-describedby="ariaDescribedby"
        name="radio-sub-component"
      >
        <b-form-radio value="first">Toggle this custom radio</b-form-radio>
        <b-form-radio value="second">Or toggle this other custom radio</b-form-radio>
        <b-form-radio value="third" disabled>This one is Disabled</b-form-radio>
        <b-form-radio :value="{ fourth: 4 }">This is the 4th radio</b-form-radio>
      </b-form-radio-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'first',
        options: [
          { text: 'Toggle this custom radio', value: 'first' },
          { text: 'Or toggle this other custom radio', value: 'second' },
          { text: 'This one is Disabled', value: 'third', disabled: true },
          { text: 'This is the 4th radio', value: { fourth: 4 } }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-group.vue -->

Не стесняйтесь комбинировать и сопоставлять свойство options и <b-form-radio> в <b-form-radio-group>. Помещенные вручную вводы <b-form-radio> будут появляться под любыми радио-вводами, сгенерированными свойством options. Чтобы они отображались выше входов, созданных с помощью options, поместите их в именованный слот first.

<template>
  <div>
    <b-form-group label="Radios using options and slots" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="radio-slots"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-options-slots"
      >
        <!-- Radios in this slot will appear first -->
        <template #first>
          <b-form-radio value="first">Toggle this custom radio from slot first</b-form-radio>
        </template>

        <!-- Radios in the default slot will appear after any option generated radios -->
        <b-form-radio :value="{ fourth: 4 }">This is the 4th radio</b-form-radio>
        <b-form-radio value="fifth">This is the 5th radio</b-form-radio>
      </b-form-radio-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: '',
        options: [
          { text: 'Or toggle this other custom radio', value: 'second' },
          { text: 'Third radio', value: 'third' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-group-slot.vue -->

Массив опций радиогруппы

options могут быть массивом строк или объектов. Доступные поля:

  • value Выбранное значение, которое будет установлено на v-model
  • disabled Отключает элемент для выбора
  • text Отображает текст или html Отображает базовый встроенный HTML-код

value может быть строкой, числом или простым объектом. Избегайте использования сложных типов в значениях.

Если указаны и html и text, html приоритет будет иметь. В поле html поддерживается только базовый/собственный HTML (компоненты работать не будут). Обратите внимание, что не все браузеры будут отображать встроенный html (т. е. <i>, <strong> и т. д.) внутри элементов <option> в <select>.

Будьте осторожны при размещении пользовательского контента в поле html, поскольку это может сделать вас уязвимыми для XSS атак, если вы сначала не обезопасить введенную пользователем строку.

const options = ['A', 'B', 'C', { text: 'D', value: { d: 1 }, disabled: true }, 'E', 'F']

Если запись массива является строкой, она будет использоваться как для сгенерированных полей value и text.

Вы можете смешивать, используя строки и объекты в массиве.

Внутри BootstrapVue преобразует указанный выше массив в следующий формат (формат массив объектов):

const options = [
  { text: 'A', value: 'A', disabled: false },
  { text: 'B', value: 'B', disabled: false },
  { text: 'C', value: 'C', disabled: false },
  { text: 'D', value: { d: 1 }, disabled: true },
  { text: 'E', value: 'E', disabled: false },
  { text: 'F', value: 'F', disabled: false }
]

Параметры как массив объектов

const options = [
  { text: 'Item 1', value: 'first' },
  { text: 'Item 2', value: 'second' },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4' },
  { text: 'Item 5', value: { foo: 'bar', baz: true } }
]

Если value отсутствует, то text будет использоваться как полей value и text. Если вы используете свойство html, вы должны предоставить свойство value.

Внутри BootstrapVue преобразует указанный выше массив в следующий формат (формат массив объектов):

const options = [
  { text: 'Item 1', value: 'first', disabled: false },
  { text: 'Item 2', value: 'second', disabled: false },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4', value: 'Item 4', disabled: false },
  { text: 'Item 5', value: 'E', disabled: false }
]

Изменение названий полей опций

Если вы хотите настроить имена свойств поля (например, используя поле name для отображения text), вы можете легко изменить их, установив text-field, html-field, value-field и disabled-field прописывает строку, содержащую имя свойства, которое вы хотели бы использовать:

<template>
  <div>
    <b-form-radio-group
      v-model="selected"
      :options="options"
      class="mb-3"
      value-field="item"
      text-field="name"
      disabled-field="notEnabled"
    ></b-form-radio-group>
    <div class="mt-3">Выбранное: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'A',
        options: [
          { item: 'A', name: 'Option A' },
          { item: 'B', name: 'Option B' },
          { item: 'D', name: 'Option C', notEnabled: true },
          { item: { d: 1 }, name: 'Option D' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-group-options-fields.vue -->

Значение радио и v-model

Компоненты <b-form-radio> не имеют значения по умолчанию. Вы должны явно указать значение через свойство value в <b-form-radio>. Это значение будет отправлено в v-model, когда радио будет проверено.

v-model как <b-form-radio>, так и <b-form-radio-group> привязывается к свойству checked. Чтобы предварительно проверить радио, вы должны установить значение v-model равным одному из значений радио (т.е. должно соответствовать значению, указанному в одном из параметра value). Не используйте свойство checked напрямую. Каждый радиомодуль в радиогруппе должен иметь уникальное значение.

Радио поддерживают значения многих типов, такие как string, boolean, number или простой object.

Инлайновые и стековые радио

По умолчанию <b-form-radio-group> генерирует встроенные радио, а <b-form-radio> генерирует сложенные радио. Установите свойство stacked на <b-form-radio-group>, чтобы радиостанции появлялись одно над другим, или при использовании радиостанций не в группе, установите свойство inline на b-form-radio значение true, чтобы сделать их встроенными.

<template>
  <div>
    <b-form-group label="Inline radios (default)" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-inline"
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Stacked radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radios-stacked"
        stacked
      ></b-form-radio-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'first',
        options: [
          { text: 'First radio', value: 'first' },
          { text: 'Second radio', value: 'second' },
          { text: 'Third radio', value: 'third' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-stacked.vue -->

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

Используйте опцию size для управления размером радио. Размер по умолчанию - средний. Поддерживаемые значения размера: sm (маленький) и lg (большой).

<div>
  <b-form-radio name="radio-size" size="sm">Маленький</b-form-radio>
  <b-form-radio name="radio-size">По умолчанию</b-form-radio>
  <b-form-radio name="radio-size" size="lg">Большой</b-form-radio>
</div>

<!-- form-radio-sizes.vue -->

Размеры могут быть заданы для отдельных компонентов <b-form-radio> или унаследованы от параметра size в <b-form-radio-group>.

Примечание: Bootstrap v4.x изначально не поддерживает размеры для настраиваемых элементов управления радио. Однако BootstrapVue включает настраиваемый SCSS/CSS, который добавляет поддержку для изменения размера настраиваемых радио.

Радио кнопочного типа

Визуализируйте радио как кнопки, установив для свойства buttons значение true в <b-form-radio-group>. Установите вариант кнопки, установив для свойства button-variant один из стандартных вариантов кнопки Bootstrap (смотрите <b-button> для поддерживаемых вариантов). По умолчанию button-variant является secondary.

Свойство buttons имеет приоритет над plain, а button-variant не имеет никакого эффекта, если buttons не установлено.

Радио в стиле кнопки будут иметь класс .active, автоматически примененный к их метке, когда они находятся в отмеченном состоянии.

<template>
  <div>
    <b-form-group label="Button style radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="btn-radios-1"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radios-btn-default"
        buttons
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group
      label="Button style radios with outline-primary variant and size lg"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-radio-group
        id="btn-radios-2"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        button-variant="outline-primary"
        size="lg"
        name="radio-btn-outline"
        buttons
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Stacked button style radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="btn-radios-3"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-btn-stacked"
        buttons
        stacked
      ></b-form-radio-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'radio1',
        options: [
          { text: 'Radio 1', value: 'radio1' },
          { text: 'Radio 3', value: 'radio2' },
          { text: 'Radio 3 (disabled)', value: 'radio3', disabled: true },
          { text: 'Radio 4', value: 'radio4' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-buttons.vue -->

Радиовводы нестандартного стиля (простые)

Вы можете сделать так, чтобы <b-form-radio> и <b-form-radio-group> отображали радио-ввод в собственном стиле браузера, установив свойство plain.

<template>
  <div>
    <b-form-group label="Plain inline radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="plain-inline"
        plain
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Plain stacked radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="plain-stacked"
        plain
        stacked
      ></b-form-radio-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'first',
        options: [
          { text: 'First radio', value: 'first' },
          { text: 'Second radio', value: 'second' },
          { text: 'Third radio', value: 'third' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-plain.vue -->

Примечание: plain не будет иметь никакого эффекта, если установлено buttons/button.

Требуемое ограничение

При использовании отдельных компонентов <b-form-radio> (не в <b-form-radio-group>), и вы хотите, чтобы радио были required в вашей форме, вы должен предоставлять name для каждого <b-form-radio> для того, чтобы требуемое ограничение работало. Все компоненты <b-form-radio>, связанные с одной и той же v-model, должны иметь одинаковое name.

name требуется для того, чтобы вспомогательные технологии (такие как программы чтения с экрана и пользователи, использующие только клавиатуру) могли знать, какие радиостанции принадлежат одной и той же переменной формы (имя также автоматически включает встроенную навигацию с клавиатуры браузера), поэтому required будет только работать, если установлено name. <b-form-radio-group> автоматически сгенерирует уникальное имя входа, если оно не указано в группе.

Автофокус

Когда свойство autofocus установлено на <b-form-radio>, вход будет автоматически сфокусирован, когда он вставлен (т.е. установлен) в документ или повторно активирован, когда он находится внутри компонента Vue <keep-alive>. Обратите внимание, что это свойство не устанавливает атрибут autofocus на входе и не может сказать, когда ввод становится видимым.

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

Bootstrap включает стили проверки valid и invalid состояний для большинства элементов управления формой.

Вообще говоря, вы захотите использовать определенное состояние для определенных типов обратной связи:

  • false (обозначает недопустимое состояние) отлично подходит, когда есть блокирующее или обязательное поле. Пользователь должен правильно заполнить это поле, чтобы отправить форму.
  • true (обозначает действительное состояние) идеально подходит для ситуаций, когда у вас есть проверка по каждому полю во всей форме и вы хотите поощрить пользователя через остальные поля.
  • null Не отображает состояние проверки (ни действительное, ни недействительное)

Чтобы применить один из значков контекстного состояния на <b-form-radio>, установите для свойства state значение false (для недопустимого), true (для допустимого) или null (состояние проверки отсутствует).

Примечание: Контекстное состояние не поддерживается для радиостанций, отображаемых в режиме кнопок.

Контекстное состояние с примером обратной связи

<template>
  <div>
    <b-form-radio-group v-model="value" :options="options" :state="state" name="radio-validation">
      <b-form-invalid-feedback :state="state">Пожалуйста, выберите один</b-form-invalid-feedback>
      <b-form-valid-feedback :state="state">Спасибо</b-form-valid-feedback>
    </b-form-radio-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: null,
        options: [
          { text: 'Первое радио', value: 'first' },
          { text: 'Второе радио', value: 'second' },
          { text: 'Третье радио', value: 'third' }
        ]
      }
    },
    computed: {
      state() {
        return Boolean(this.value)
      }
    }
  }
</script>

<!-- b-form-radio-validation.vue -->

Передача состояния контекстной проверки вспомогательным технологиям и пользователям с дальтонизмом

Использование этих контекстных состояний для обозначения состояния элемента управления формы обеспечивает только визуальную цветовую индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана, или пользователям с дальтонизмом.

Убедитесь, что также имеется альтернативная индикация состояния. Например, вы можете включить подсказку о состоянии в самом тексте элемента управления формой <label> или путем предоставления дополнительного текстового блока справки (например, <b-form-invalid-feedback>). В частности, для вспомогательных технологий недопустимым элементам управления формой также может быть назначен атрибут aria-invalid="true" (смотрите ниже).

Атрибут ARIA aria-invalid

Когда <b-form-radio-group> имеет недопустимое контекстное состояние (т.е. state = false), вам также может потребоваться для установки <b-form-radio-group> свойства aria-invalid значение true.

Поддерживаемые значения aria-invalid:

  • false (по умолчанию) Ошибок не обнаружено
  • true Значение не прошло проверку.

aria-invalid автоматически устанавливается в true, если свойство state имеет значение false.

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

<b-form-radio-group>

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

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

  • <b-radio-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
AnyТекущее значение отмеченного радио в группе
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` для отсутствия проверки состояния
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-radio, чтобы они появлялись перед радио, созданными из опций опций

События

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

<b-form-radio>

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

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

  • <b-radio>

Примечание: Псевдонимы компонентов доступны только при импорте всего 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Текущая стоимость радио
disabled
BooleanfalseЕсли установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
form
StringИдентификатор формы, к которой принадлежит элемент управления формой. Устанавливает атрибут `form` в элементе управления
id
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
inline
BooleanfalseЕсли установлено, радио отображается как встроенный элемент, а не как блок шириной 100%
name
StringУстанавливает значение атрибута `name` в элементе управления формы
plain
BooleanfalseВизуализируйте элемент управления формы в обычном режиме, а не в режиме пользовательского стиля
required
BooleanfalseДобавляет атрибут `required` в элемент управления формы
size
StringУстановите размер внешнего вида компонента. 'sm', 'md' (по умолчанию) или 'lg'
state
BooleannullУправляет внешним видом состояния проверки компонента. `true` для действительного, `false` для недопустимого или `null` для отсутствия проверки состояния
value
AnyЗначение, возвращаемое при включении этого радио

v-model

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

Слоты

Наименование
Описание
default Контент для размещения в форме радио

События

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

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

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

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

Пример:

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

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

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

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

Пример:

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