Radio

Компонент Radio предназначен для выбора одного значения из множества опций. Он тесно интегрирован с v-model, что позволяет синхронизировать выбранное значение с состоянием компонента Vue. В Element Plus существуют два основных варианта использования: Radio Button и Radio Group.

Radio

Базовый Radio представляет собой одиночную радиокнопку. Основные свойства:

  • model-value – текущее выбранное значение.
  • label – значение, которое будет возвращено при выборе этой кнопки.
  • disabled – блокирует выбор радиокнопки.
  • border – добавляет рамку вокруг кнопки (в некоторых версиях применяется через radio-button).

Пример:

Здесь picked автоматически обновляется при выборе одной из радиокнопок.

Radio Group

Radio Group позволяет объединять несколько радиокнопок в логическую группу. Использование группы упрощает управление состоянием и позволяет применять общие стили и свойства.

Основные свойства:

  • model-value – текущее выбранное значение всей группы.
  • size – размеры кнопок (medium, small, mini).
  • disabled – блокирует все радиокнопки в группе.
  • fill – цвет фона выбранной кнопки (для radio-button).
  • text-color – цвет текста выбранной кнопки (для radio-button).

Пример использования:

В этом примере все радиокнопки управляются через одну переменную, что облегчает обработку выбранного значения.

Radio Button

Radio Button – это визуальный стиль радиокнопки с рамкой и более четкой кнопочной формой. Поддерживает те же свойства, что и обычный Radio, но с добавлением:

  • border – отображение рамки кнопки.
  • size – изменение размера кнопки.
  • fill – цвет фона при выборе.
  • text-color – цвет текста при выборе.

Пример:

Преимущество Radio Button заключается в возможности визуально выделять выбранную опцию через цвет фона и рамку, что делает интерфейс более интерактивным.

Динамическое управление

Радиокнопки в Element Plus можно создавать динамически на основе массива данных. Это позволяет строить формы, где количество опций заранее неизвестно.

Пример динамической генерации:

Такой подход упрощает работу с большими наборами данных и обеспечивает поддержку реактивности через v-model.

Состояния и стилизация

  • disabled можно применять как на уровне отдельных радиокнопок, так и на всей группе.
  • Для изменения внешнего вида кнопок используются CSS-переменные и свойства fill и text-color.
  • size позволяет управлять визуальной плотностью элементов формы, что важно для адаптивного дизайна.

Пример комбинирования свойств:


  A
  B

Управление событиями

Радиокнопки и группы поддерживают события:

  • change – срабатывает при изменении выбранного значения.
  • focus и blur – стандартные события для управления фокусом.

Пример:


  A
  B

Итоговые рекомендации по использованию

  • Использовать Radio Group, если есть несколько опций, чтобы централизовать управление состоянием.
  • Применять Radio Button для более визуально выраженных форм выбора.
  • Динамическая генерация через v-for упрощает масштабируемость интерфейса.
  • Стилизация через fill и text-color позволяет интегрировать компоненты в дизайн системы без дополнительного CSS.
  • Событие change обеспечивает удобный способ реагирования на выбор пользователя без дополнительной логики наблюдения за переменными.
Оглавление