Radio
Компонент Radio — это стилизованная радио-кнопка с поддержкой двух вариантов оформления, цветовой палитры и встроенной метки.
Обзор
- Основное назначение: выбор одного значения из группы взаимоисключающих опций.
- Ключевые возможности:
- Два варианта оформления:
basic(с заливкой) иoutlined(контурный с точкой). - Цветовая палитра.
- Поддержка
v-modelчерезmodelValueиvalue. - Блокированное состояние (
disabled). - Нестилизованный режим (
unstyled). - Встроенная метка (
label) или внешняя. - Методы
focus()иblur().
- Два варианта оформления:
API компонента
Props
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
modelValue | String | Number | Boolean | Текущее выбранное значение (v-model). | |
value | String | Number | Boolean | Значение этой радио-кнопки. При совпадении с modelValue кнопка выбрана. | |
variant | String | 'basic' | Вариант оформления. Возможные значения: 'basic', 'outlined'. |
color | String | 'primary' | Цвет радио-кнопки. Возможные значения: 'primary', 'secondary', 'info', 'success', 'warning', 'error'. |
label | String | Number | Object | Текст метки. Если указан, кнопка оборачивается в <label>. | |
labelProps | Object | {} | Дополнительные атрибуты для элемента label. |
disabled | Boolean | false | Блокирует радио-кнопку. |
unstyled | Boolean | false | Убирает все стили по умолчанию. |
className | String | Дополнительные CSS-классы для поля ввода. | |
classNames | Object | {} | Объект для кастомизации внутренних классов. Ключи: label, labelText, input. |
type | String | 'radio' | HTML-тип поля ввода. |
События
| Событие | Параметр | Описание |
|---|---|---|
update:modelValue | String | Number | Boolean | Вызывается при выборе радио-кнопки. Передаёт значение value. |
Методы
| Метод | Описание |
|---|---|
focus() | Устанавливает фокус на радио-кнопку. |
blur() | Убирает фокус с радио-кнопки. |
Data-атрибуты
| Атрибут | Значение | Условие |
|---|---|---|
data-disabled | 'true' | Кнопка заблокирована (только без label). |