Radio и RadioGroup

Компоненты Radio и RadioGroup в Naive UI предоставляют удобный способ реализации выбора одного значения из множества возможных опций. Они тесно связаны между собой: RadioGroup служит контейнером для нескольких радиокнопок Radio, обеспечивая централизованное управление состоянием и обработку событий.

Компонент Radio

Radio представляет собой отдельную радиокнопку с поддержкой следующих ключевых свойств:

  • value – значение радиокнопки. Оно используется для идентификации выбранной опции в RadioGroup.
  • disabled – булево свойство, блокирующее выбор данной кнопки.
  • label – текстовое описание радиокнопки.
  • size – размер кнопки (small, medium, large), влияющий на визуальную масштабируемость.
  • name – имя группы радиокнопок для стандартной HTML-совместимости (если используется вне RadioGroup).

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

<n-radio label="Option 1" value="1" />

Если радиокнопка находится вне RadioGroup, управление её состоянием осуществляется через директиву v-model:

<n-radio v-model="selectedValue" label="Option 2" value="2" />

Здесь selectedValue — реактивное состояние, в котором хранится выбранное значение.

Компонент RadioGroup

RadioGroup объединяет несколько радиокнопок и обеспечивает согласованное управление выбором:

  • v-model:value – реактивная переменная для хранения выбранного значения.
  • disabled – глобальное отключение всех радиокнопок в группе.
  • size – общий размер радиокнопок группы.
  • name – общий атрибут имени для радиокнопок.

Пример структуры с RadioGroup:

<n-radio-group v-model:value="selectedOption" size="medium">
  <n-radio label="Первый вариант" value="1" />
  <n-radio label="Второй вариант" value="2" />
  <n-radio label="Третий вариант" value="3" />
</n-radio-group>

В этом примере переменная selectedOption автоматически синхронизируется с выбранной радиокнопкой.

Обработка событий

Naive UI поддерживает следующие события для радиокнопок:

  • on-update:value – вызывается при изменении состояния радиокнопки или группы.
  • on-change – срабатывает при окончательном выборе значения.

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

<n-radio-group
  v-model:value="selectedOption"
  @update:value="handleUpdate"
  @change="handleChange"
>
  <n-radio label="Option A" value="A" />
  <n-radio label="Option B" value="B" />
</n-radio-group>

<script>
export default {
  data() {
    return {
      selectedOption: 'A'
    };
  },
  methods: {
    handleUpdate(value) {
      console.log('Обновление значения:', value);
    },
    handleChange(value) {
      console.log('Выбор завершен:', value);
    }
  }
};
</script>

Стилизация и настройка внешнего вида

Radio и RadioGroup поддерживают стилизацию через:

  • size – влияет на диаметр радиокнопки и размер текста.
  • disabled – визуально затемняет и делает недоступным компонент.
  • inline (для RadioGroup) – выстраивает радиокнопки в одну линию вместо вертикального списка.

Пример горизонтального расположения:

<n-radio-group v-model:value="selectedOption" inline>
  <n-radio label="A" value="A" />
  <n-radio label="B" value="B" />
  <n-radio label="C" value="C" />
</n-radio-group>

Композиция с другими компонентами

RadioGroup легко интегрируется с формами и другими компонентами Naive UI:

  • FormItem – для валидации обязательного выбора.
  • Grid и Space – для гибкой верстки и размещения радиокнопок в колонках или с отступами.

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

<n-form :model="formData">
  <n-form-item label="Выберите опцию" path="option">
    <n-radio-group v-model:value="formData.option">
      <n-radio label="Опция 1" value="1" />
      <n-radio label="Опция 2" value="2" />
    </n-radio-group>
  </n-form-item>
</n-form>

<script>
export default {
  data() {
    return {
      formData: {
        option: '1'
      }
    };
  }
};
</script>

Динамическое создание радиокнопок

Использование v-for позволяет генерировать радиокнопки из массива данных:

<n-radio-group v-model:value="selectedValue">
  <n-radio
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  />
</n-radio-group>

<script>
export default {
  data() {
    return {
      selectedValue: null,
      options: [
        { label: 'Первый', value: 1 },
        { label: 'Второй', value: 2 },
        { label: 'Третий', value: 3 }
      ]
    };
  }
};
</script>

Такой подход упрощает работу с динамическими формами и списками.

Ключевые моменты работы с Radio и RadioGroup

  • v-model – основной способ связывания состояния выбранной радиокнопки с данными.
  • disabled – доступен на уровне отдельной кнопки и всей группы.
  • size и inline – позволяют управлять визуальным стилем.
  • События (on-update:value, on-change) – дают контроль над реакцией приложения на выбор пользователя.
  • Динамическая генерация – облегчает работу с массивами и внешними данными.

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

Оглавление