Форум

Методология

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

Платформа

Сообщество

desktop
touch-pad
touch-phone

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.
icon BEMJSON Иконка на кнопке. Формируется блоком icon.
title String Текст всплывающей подсказки.
id String Уникальный идентификатор кнопки.
tabIndex Number Последовательность перехода между контролами при нажатии на Tab.

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

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

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

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

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

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

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

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

Open in a new window
Кнопка отправки формы (модификатор type в значении submit)

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

Open in a new window

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

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

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

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

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

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

Open in a new window
Радиокнопка (модификатор togglable в значении radio)

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

Open in a new window

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

Open in a new window

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

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

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

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

Open in a new window

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

Open in a new window

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

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

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

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

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

s

Open in a new window

m

Open in a new window

l

Open in a new window

xl

Open in a new window

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

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

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

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

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

Open in a new window
Псевдокнопка (модификатор view в значении pseudo)

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

Open in a new window
Open in a new window
Кнопка без границ (модификатор view в значении plain)

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

Open in a new window
Open in a new window

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

Поле name

Тип: String.

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

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

Open in a new window

Поле val

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

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

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

Open in a new window

Поле text

Тип: String.

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

Open in a new window

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

Поле url

Тип: String.

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

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

Open in a new window

Поле icon

Тип: BEMJSON.

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

Open in a new window

Поле title

Тип: String.

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

Open in a new window

Поле id

Тип: String.

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

Open in a new window

Поле tabIndex

Тип: Number.

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

Open in a new window
Instance methods:
getText
setText

Block button

Augments:control

Instance methods:

getText():String
description
Returns text of the button
setText(text):button
description
Sets text to the button
parameters
text
String

button_type_link

Instance methods:

getUrl():String
description
Returns url
setUrl(url):button
description
Sets url
parameters
url
String