Skip to content

Latest commit

 

History

History
420 lines (337 loc) · 13 KB

checkbox-group.ru.md

File metadata and controls

420 lines (337 loc) · 13 KB
Raw

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. Все чекбоксы группы в данном случае всегда располагаются в линию.

{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'checkbox-button',
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}

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

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

{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm', type : 'line' },
    name : 'checkbox-line',
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}

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

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

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

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

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

  • всей группе чекбоксов
{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm', disabled : true },
    name : 'checkbox',
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}
{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm', type : 'button', disabled : true },
    name : 'checkbox-button',
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}
  • отдельному чекбоксу в группе
{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm' },
    name : 'checkbox-line',
    options : [
        { val : 1, text : 'Блок', disabled : true },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}
{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'checkbox-line',
    options : [
        { val : 1, text : 'Блок', disabled : true },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}

Модификатор 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.

{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm' },
    name : 'checkbox-islands',
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}
{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'checkbox-islands',
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}

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

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

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

Задает размер всем чекбоксам в группе.

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

m

{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm' },
    name : 'checkbox-button',
    val : [1, 2],
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}
{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'checkbox-button',
    val : [2, 3],
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}

l

{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'l' },
    name : 'checkbox-button',
    val : [1, 2],
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}
{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'l', type : 'button' },
    name : 'checkbox-button',
    val : [2, 3],
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}

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

Поле name

Тип: String

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

{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'checkbox-button-1',
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}

Поле val

Тип: Array.

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

{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'checkbox-button-1',
    val : [1, 2],
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент' },
        { val : 3, text : 'Модификатор' }
    ]
}

Поле options

Тип: Array

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

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

Поле Тип Описание
val String, Number Значение, возвращаемое чекбоксом, если он выбран.
text String Текст подписи к чекбоксу или текст кнопки чекбокса, если выбран модификатор type в значении button.
disabled Boolean Неактивное состояние.
icon BEMJSON Иконка. Формируется блоком icon. Используется только для группы чекбоксов с модификатором type в значении button.
title String Текст сплывающей подсказки. Используется только для группы чекбоксов с модификатором type в значении button.
id String Уникальный идентификатор чекбокса. 
{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm' },
    name : 'checkbox-islands',
    val : [1, 3],
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент', disabled : true },
        { val : 3, text : 'Модификатор', disabled : true },
        { val : 4, text : 'Модификатор' }
    ]
}
{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'checkbox-islands',
    val : [3],
    options : [
        { val : 1, text : 'Блок' },
        { val : 2, text : 'Элемент', disabled : true, title : 'Неактивен' },
        { val : 3, text : 'Модификатор', disabled : true, title : 'Отмечен и неактивен' }
    ]
}
{
    block : 'checkbox-group',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'checkbox-islands',
    val : [1],
    options : [
        {
            val : 1,
            text : 'Twitter',
            title : 'Подписаться на новости БЭМ',
            icon : {
                block : 'icon',
                mods : { social : 'twitter' }
            }
        },
        {
            val : 2,
            text : 'ВКонтакте',
            disabled : true,
            title : 'Подписаться на новости БЭМ',
            icon : {
                block : 'icon',
                mods : { social : 'vk' }
            }
        }
    ]
}