Skip to content

button.ru.md

Latest commit

 

History

History
499 lines (354 loc) · 16.2 KB

button.ru.md

File metadata and controls

499 lines (354 loc) · 16.2 KB

button

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

Обзор блока

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

Модификатор Допустимые значения Способы использования Описание
type 'link', 'submit' BEMJSON Тип кнопки.
togglable 'check', 'radio' BEMJSON Тип переключателя.
disabled true BEMJSON, JS Неактивное состояние.
focused true BEMJSON, JS Фокус на блоке.
pressed true – Действие «нажатие на кнопку».
hovered true – Наведение курсором.
theme 'islands' BEMJSON Стилевое оформление.
size 's', 'm', 'l', 'xl' BEMJSON Размер кнопки. Используется для кнопок с модификатором theme в значении islands.
view 'action', 'pseudo', 'plain' BEMJSON Тип визуального выделения кнопки.

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

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

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

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

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

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

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

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

Кнопка-ссылка (модификатор type в значении link)

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

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'link' },
    url : 'https://bem.info/',
    text : 'Попробуй БЭМ'
}
Кнопка отправки формы (модификатор type в значении submit)

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

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    text : 'Я отправляю данные'
}

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

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

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

Используется для реализации «залипания» кнопки. Определяет поведение нажатой кнопки.

Кнопка-переключатель (модификатор togglable в значении check)

Первое нажатие на кнопку вдавливает ее, второе – приводит в первоначальное состояние.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', togglable : 'check' },
    text : 'Я нажата'
}
Радиокнопка (модификатор togglable в значении radio)

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

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', togglable : 'radio' },
    text : 'Я «залипла» :)'
}

Пример использования в радиогруппе:

{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm', type : 'button', togglable : 'radio' },
    name : 'radio-button',
    options : [
        { val : 1, text : 'Первый' },
        { val : 2, text : 'Второй', checked : true },
        { val : 3, text : 'Третий' }
    ]
}

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

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

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

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

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', disabled : true },
    text : 'Неактивна'
}

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

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

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

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

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

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

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

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

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

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

Определяет действие «нажатие на кнопку».

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

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

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

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

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

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

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

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

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

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

{
    block : 'button',
    mods : { theme : 'islands', size : 'm' },
    text : 'Тема islands'
}

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

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

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

Задает размер всем типам кнопок.

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

s

{
    block : 'button',
    mods : { theme : 'islands', size : 's' },
    text : 'Размер s'
}

m

{
    block : 'button',
    mods : { theme : 'islands', size : 'm' },
    text : 'Размер m'
}

l

{
    block : 'button',
    mods : { theme : 'islands', size : 'l' },
    text : 'Размер l'
}

xl

{
    block : 'button',
    mods : { theme : 'islands', size : 'xl' },
    text : 'Размер xl'
}

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

Допустимые значения: 'action', 'pseudo', 'plain'.

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

Кнопка действия (модификатор view в значении action)

Используется для визуального выделения кнопки на странице.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', view : 'action' },
    text : 'Купить сейчас!'
}
Псевдокнопка (модификатор view в значении pseudo)

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

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', view : 'pseudo' },
    text : 'У меня прозрачный фон'
}
{
    block : 'button',
    mods : { theme : 'islands', size : 'm', view : 'pseudo', disabled : true },
    text : 'У меня нет границ'
}
Кнопка без границ (модификатор view в значении plain)

Используется при необходимости представить кнопкой другой блок, например, иконку (icon).

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', view : 'plain' },
    text : 'Кнопка без границ'
}
{
    block : 'button',
    mods : { theme : 'islands', size : 'm', view : 'plain' },
    icon : {
        block : 'icon',
        mods : { social : 'twitter' }
    }
}

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

Поле name

Тип: String.

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

Не используется, если модификатор type выставлен в значение link.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Test_1',
    val : 'passed',
    text : 'Проверить результат'
}

Поле val

Тип данных: String, Number.

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

Не используется, если модификатор type выставлен в значение link.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Test_1',
    val : 'passed',
    text : 'Проверить результат'
}

Поле text

Тип: String.

Определяет текст, который отображается на кнопке.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Test_1',
    val : 'passed',
    text : 'Проверить результат'
}

Примечание Поле text позволяет определить текст кнопки и подходит для решения большинства задач, однако через него нельзя задать произвольный BEMJSON. В случае если необходимо внутри блока button определить некую HTML-разметку, нужно использовать поле content.

Поле url

Тип: String.

Определяет адрес, по которому осуществляется переход при нажатии на кнопку с модификатором type в значении link.

Не используется с другими типами кнопок.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'link' },
    url : 'https://bem.info/',
    text : 'Попробуй БЭМ'
}

Поле target

Тип: String.

Определяет поведение кнопки-ссылки. Принимает все допустимые значения HTML-атрибута target: _blank, _self (используется по умолчанию), _parent, _top.

Не используется с другими типами кнопок.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'link' },
    url : 'https://bem.info/',
    target: '_blank',
    text : 'Попробуй БЭМ'
}

Поле icon

Тип: BEMJSON.

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

{
    block : 'button',
    mods : { theme : 'islands', size : 'm' },
    text : 'Twitter',
    icon : {
        block : 'icon',
        mods : { social : 'twitter' }
    }
}

Поле title

Тип: String.

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

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Тест №1',
    val : 'Пройден успешно',
    text : 'Проверить результат',
    title : 'Кнопка отправки результатов теста'
}

Поле id

Тип: String.

Определяет уникальный идентификатор кнопки.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Тест №1',
    val : 'Пройден успешно',
    text : 'Проверить результат',
    id : 'Unique_1'
}

Поле tabIndex

Тип: Number.

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

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Тест №1',
    val : 'Пройден успешно',
    text : 'Проверить результат',
    id :'val_1',
    tabIndex : 2
}