Skip to content

Latest commit

 

History

History
369 lines (283 loc) · 11.1 KB

radio.ru.md

File metadata and controls

369 lines (283 loc) · 11.1 KB
Raw

radio

Используется в составе блока radio-group для создания радиопереключателей.

Обзор блока

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

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

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

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

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

Блок radio предоставляет возможность изменять состояние, содержимое и внешний вид радиопереключателей.

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

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

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

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

Задает внешний вид блока. В этом случае выбор радиопереключателя происходит нажатием на кнопку.

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}

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

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

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

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

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', checked : true },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}
{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button', checked : true },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}

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

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

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

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

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', disabled : true },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}
{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button', disabled : true },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}

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

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

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

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

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

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', focused : true },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}
{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button', focused : true },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}

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

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

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

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

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

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

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

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

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

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

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}
{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}

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

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

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

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

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

m

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}
{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}

l

{
    block : 'radio',
    mods : { theme : 'islands', size : 'l' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}
{
    block : 'radio',
    mods : { theme : 'islands', size : 'l', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}

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

Поле name

Тип: String.

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

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}

Поле val

Тип: String, Number.

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

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}

Поле text

Тип: String.

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

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}
{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML'
}

Поле icon

Тип: BEMJSON.

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

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

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'twitter',
    icon : {
        block : 'icon',
        mods : { social : 'twitter' }
    }
}

Поле title

Тип: String.

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

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

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'twitter',
    title : 'Кнопка выбора социальной сети',
    icon : {
        block : 'icon',
        mods : { social : 'twitter' }
    }
}

Поле tabIndex

Тип: Number.

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

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Использовать BEMHTML',
    tabIndex : 3
}