Форум

Методология

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

Платформа

Сообщество

desktop
touch-pad
touch-phone

checkbox-group

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

Обзор блока

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

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

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

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

Описание блока

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

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

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

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

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

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

Позволяет реализовать блок checkbox-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 : 'checkbox-group',
    mods : { theme : 'islands', size : 'm', focused : true },
    name : 'checkbox',
    val : [2],
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}
{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm', type : 'button', focused : true },
    name : 'checkbox-button',
    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

Тип: Array.

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

Open in a new window

Поле options

Тип: Array

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

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

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

Block checkbox-group

Instance methods:

getVal():String
description
Returns control value
setVal(val, [data]):checkbox-group
description
Sets control value
parameters
val
Array
value
data
Object
additional data
getName():String
description
Returns name of control
getCheckboxes():Array
description
Returns checkboxes