SRadioGroup > SRadio

Радио-кнопки.

В чем отличие от аналогов?

В отличие от популярных библиотек компонентов для Vue3:

1. Сразу идет с кликабельным стандартизированным лейблом в качестве простого атрибута. Это унифицирует код и внешний вид компонентов, упрощается поддержка и взаимозаменяемость.
2. Сразу из коробки идет кнопочный стиль, который часто используется.
3. Поддерживает три формата передачи опций в группы радио-кнопок, что удобно в зависимости от кейса:
   1. <SRadio /> — там где опции являются частью дизайна, их можно и удобно хардкодить в шаблон;
   2. {value1: title1, value2: title2} — что удобно для быстрого получения из key-value конфигов, а также из моделей — User::pluck('name', 'id');
   3. [[value1, title1], [value2, title2]] — что удобно для выгрузки там, где важен порядок. Это минимизирует код в контроллерах, помогая сохранять принцип «тонкого контроллера», которого мы придерживаемся.
4. Взаимозаменяемость формата опций с другими выбиралками из вариантов. Это позволяет легко заменять SRadioGroup на SSelect или SCheckboxGroup, не трогая бэкенд код.

Группа радио-кнопок

ОшибкаВопросИдея

Модель будет принимать значение выбранного варианта: bug

<SRadioGroup v-model="type">
    <SRadio value="bug">Ошибка</SRadio>
    <SRadio value="question">Вопрос</SRadio>
    <SRadio value="idea">Идея</SRadio>
</SRadioGroup>
<p>Модель будет принимать значение выбранного варианта: <code>{{ type }}</code></p>

<template>
    <SRadioGroup v-model="type">
        <SRadio value="bug">Ошибка</SRadio>
        <SRadio value="question">Вопрос</SRadio>
        <SRadio value="idea">Идея</SRadio>
    </SRadioGroup>
    <p>Модель будет принимать значение выбранного варианта: <code>{{ type }}</code></p>
</template>
<script setup>
import { ref } from 'vue'
const type = ref('bug')
</script>

Динамический набор значений

В предыдущем примере набор вариантов хардкодился в шаблоне, что удобно, когда набор значений относится к логическому уровню интерфейса. Но когда набор вариантов идет из базы данных или конфига, очень неудобно каждый раз формировать набор элементов через v-for, и вместо этого используем атрибут options.

ОшибкаВопросИдея

<SRadioGroup v-model="type" :options="options" />

<template>
    <SRadioGroup v-model="type" :options="options" />
</template>
<script setup>
import { ref } from 'vue'
const options = { 1: 'Ошибка', 2: 'Вопрос', 3: 'Идея' }
const type = ref(1)
</script>

Где options — это объект вариантов выбора в формате {value1: title1, value2: title2} или массив в формате [[value1, title1], [value2, title2]]

Кнопочный стиль

Чтобы заменить стиль с кружочками на группу кнопок, добавляем атрибут buttons:

ОшибкаВопросИдея

<SRadioGroup v-model="type" :options="options" buttons />

<template>
    <SRadioGroup v-model="type" :options="options" buttons />
</template>
<script setup>
import { ref } from 'vue'
const options = { 1: 'Ошибка', 2: 'Вопрос', 3: 'Идея' }
const type = ref(1)
</script>

Вертикальный список радио-кнопок

Чтобы выводить группу радио-кнопок вертикальным списком, добавляем атрибут vertical:

ОшибкаВопросИдея

<SRadioGroup v-model="type" :options="options" vertical />

<template>
    <SRadioGroup v-model="type" :options="options" vertical />
</template>
<script setup>
import { ref } from 'vue'
const options = { 1: 'Ошибка', 2: 'Вопрос', 3: 'Идея' }
const type = ref(1)
</script>

Недоступное значение

Добавляем disabled-атрибут значению, которое должно быть недоступно для переключения.

ОшибкаВопросИдея

<SRadioGroup v-model="type">
    <SRadio value="bug" disabled>Ошибка</SRadio>
    <SRadio value="question">Вопрос</SRadio>
    <SRadio value="idea">Идея</SRadio>
</SRadioGroup>

<template>
    <SRadioGroup v-model="type">
        <SRadio value="bug" disabled>Ошибка</SRadio>
        <SRadio value="question">Вопрос</SRadio>
        <SRadio value="idea">Идея</SRadio>
    </SRadioGroup>
</template>
<script setup>
import { ref } from 'vue'
const type = ref('question')
</script>

Нулевое значение (плейсхолдер)

У радио-кнопок иногда бывает «не выбранное значение», особенно в фильтрах при заданном наборе вариантов. Для этого удобно использовать синтаксис placeholder:

ВсеОшибкаВопросИдея

<SRadioGroup v-model="type" placeholder="Все" :options="options" />

<template>
    <SRadioGroup v-model="type" placeholder="Все" :options="options" />
</template>
<script setup>
import { ref } from 'vue'
const options = { 1: 'Ошибка', 2: 'Вопрос', 3: 'Идея' }
const type = ref(null)
</script>

Интерфейс компонента SRadioGroup

Свойства (Props)

Название	Тип	По умолчанию	Описание
v-model	any	undefined	Выбранное значение.
options	Record | Array	{}	Список вариантов (объект {value: title} или массив [[value, title]]).
buttons	boolean	false	Использовать стиль кнопок вместо кружочков.
vertical	boolean	false	Расположение элементов в колонку.
placeholder	string	undefined	Текст для «нулевого» варианта выбора (с пустым значением).

Слоты (Slots)

Название	Описание
default	Содержимое группы (обычно компоненты SRadio).

События (Events)

Название	Параметры	Описание
change	(value: any)	Вызывается при изменении выбранного значения.

Интерфейс компонента SRadio

Свойства (Props)

Название	Тип	По умолчанию	Описание
value	string | number | boolean	-	Обязательное. Значение элемента.
disabled	boolean	false	Отключает возможность выбора.
labelClass	string	undefined	Кастомные CSS классы для лейбла.

Слоты (Slots)

Название	Описание
default	Текст или HTML-содержимое лейбла радио-кнопки.