Skip to content

Latest commit

 

History

History
357 lines (263 loc) · 10.6 KB

checkbox.ru.md

File metadata and controls

357 lines (263 loc) · 10.6 KB

checkbox

Используется для управления параметром выбора с двумя состояниями – «включено» и «выключено».

Обзор блока

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

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

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

Поле Тип Описание
name String Уникальное имя чекбокса.
val String, Number Значение чекбокса, которое будет отправлено на сервер, если он выбран.
text String Текст подписи к чекбоксу.
icon BEMJSON Иконка. Формируется блоком icon. Используется для чекбокса с модификатором type в значении button.
title String Текст всплывающей подсказки. Используется для чекбокса с модификатором type в значении button.
tabIndex Number Последовательность перехода между контролами при нажатии на Tab.

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

Примечание HTML-атрибут autocomplete принудительно переведен в состояние off для обеспечения корректной работы блока.

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

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

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

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

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

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name: 'button',
    val: 'val_1',
    text : 'Конфеты'
}

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

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

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

Используется для выбора чекбокса.

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', checked : true },
    name: 'name1',
    val : 'val_1',
    text : 'Конфеты'
}
{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button', checked : true },
    name: 'name2',
    val : 'val_2',
    text : 'Конфеты'
}

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

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

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

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

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', disabled : true },
    name: 'name1',
    val : 'val_0',
    text : 'Конфеты закончились'
}
{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button', disabled : true },
    name: 'name2',
    val : 'val_1',
    text : 'Конфеты закончились'
}

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

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

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

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

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

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', focused : true },
    text : 'В фокусе'
}

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

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

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

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

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

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

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

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

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

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

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm' },
    name: 'islands',
    val: 'val_3',
    text : 'Тема islands'
}

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

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

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

Задает размер блока.

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

m

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm' },
    name: 'name1',
    val: 'val_1',
    text : 'Размер m'
}
{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name: 'name1',
    val: 'val_1',
    text : 'Размер m'
}

l

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'l' },
    name: 'name2',
    val: 'val_2',
    text : 'Размер l'
}
{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'l', type : 'button' },
    name: 'name1',
    val: 'val_1',
    text : 'Размер l'
}

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

Поле name

Тип: String.

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

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name: 'name1',
    val: 'val_1',
    text : 'Конфеты'
}

Поле val

Тип: String, Number.

Значение чекбокса, которое будет отправлено на сервер.

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name: 'name2',
    val: 'val_2',
    text : 'Конфеты'
}

Поле text

Тип: String.

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

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm' },
    name: 'name1',
    val: '1',
    text : 'Конфеты'
}
{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name: 'name1',
    val: '1',
    text : 'Конфеты'
}

Поле icon

Тип: BEMJSON.

Определяет иконку, которая отображается с помощью блока icon.

Используется только для чекбокса с модификатором type в значении button.

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button', checked : true },
    name: 'name1',
    val : 1,
    text : 'Поделиться',
    icon : {
        block : 'icon',
        mods : { social : 'twitter' }
    }
}

Поле title

Тип: String.

Определяет содержание всплывающей подсказки. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.

Используется только для чекбокса с модификатором type в значении button.

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button', checked : true },
    name: 'name1',
    val : 1,
    text : 'Поделиться',
    title : 'Кнопка выбора социальной сети',
    icon : {
        block : 'icon',
        mods : { social : 'twitter' }
    }
}

Поле tabIndex

Тип: Number.

Определяет порядок получения фокуса при переходе между контролами с помощью клавиши Tab.

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name: 'name1',
    val: '1',
    text : 'Конфеты',
    tabIndex : 3
}