Форум

Методология

Инструментарий

Платформа

Сообщество

desktop
touch-pad
touch-phone

radio-group

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

Обзор блока

Модификаторы блока

Модификатор Допустимые значения Способы использования Описание
type 'button', 'line' BEMJSON Тип группы радиопереключателей.
disabled true BEMJSON, JS Неактивное состояние.
focused true BEMJSON, JS Фокус на блоке.
theme 'islands' BEMJSON Стилевое оформление.
size 'm', 'l' BEMJSON Размер радиопереключателей в группе. Используется только для радиопереключателей с модификатором theme в значении islands.

Специализированные поля блока

Поле Тип Описание
name String Уникальное имя блока.
val String, Number Значение выбранного радиопереключателя.
options Array Набор значений для каждого радиопереключателя группы. Каждому типу радиопереключателя соответствует разный набор значений.

Обзор блока

Блок radio-group позволяет управлять внешним видом и состоянием вложенных радиопереключателей и выбирать только один пункт из предопределенного списка.

Модификаторы блока

Модификатор type

Допустимые значения: 'button', 'line'.

Способ использования: BEMJSON.

Кнопочный радиопереключатель (модификатор type в значении button)

Позволяет реализовать блок radio-group с помощью радиопереключателей с типом button. Все радиопереключатели группы в данном случае всегда располагаются в линию.

Open in a new window

Выравнивание (модификатор type в значении line)

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

Open in a new window

Модификатор disabled

Допустимое значение: true.

Способы использования: BEMJSON, JS.

Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.

Модификатор может быть установлен:

  • всей группе радиопереключателей
Open in a new window
Open in a new window
  • отдельному радиопереключателю в группе
Open in a new window
Open in a new window

Модификатор focused

Допустимое значение: true.

Способы использования: BEMJSON, JS.

Отвечает за наличие фокуса на блоке.

Выставляется автоматически при получении блоком фокуса.

{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm', type : 'button', focused : true },
    name : 'radio-button',
    val : 2,
    options : [
        { val : 1, text : 'Футбол' },
        { val : 2, text : 'Баскетбол' },
        { val : 3, text : 'Гандбол' }
    ]
}
{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm', focused : true },
    name : 'radio',
    val : 2,
    options : [
        { val : 1, text : 'Футбол' },
        { val : 2, text : 'Баскетбол' },
        { val : 3, text : 'Гандбол' }
    ]
}

Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.

Модификатор theme

Допустимое значение: 'islands'.

Способ использования: BEMJSON.

Отвечает за стилевое оформление блока.

Необходимо использовать с модификатором size.

Open in a new window
Open in a new window

Модификатор size

Допустимые значения для темы islands: 'm', 'l'.

Способ использования: BEMJSON.

Задает размер всем радиопереключателям в группе.

Необходимо использовать с модификатором theme в значении islands.

m

Open in a new window
Open in a new window

l

Open in a new window
Open in a new window

Специализированные поля блока

Поле name

Тип: String.

Определяет имя группы радиопереключателей.

Open in a new window

Поле val

Тип: String, Number.

Определяет значение выбранного радиопереключателя.

Open in a new window

Поле options

Тип: Array.

Определяет набор значений для каждого радиопереключателя группы.

Каждому типу радиопереключателей соответствует разный набор значений.

Поле Тип Описание
val String, Number Значение радиопереключателя, которое будет отправлено на сервер, если он выбран.
text String Текст подписи к радиопереключателю.
disabled Boolean Неактивное состояние.
icon BEMJSON Иконка. Формируется блоком icon. Используется только с модификатором type в значении button.
title String Текст всплывающей подсказки. Используется только с модификатором type в значении button.
Open in a new window
Open in a new window
Open in a new window

Block radio-group

Instance methods:

getVal():String
description
Returns control value
setVal(val, [data]):radio-group
description
Sets control value
parameters
val
String
value
data
Object
additional data
getName():String
description
Returns name of control
getRadios():radio
description
Returns options