[ELMA4] Кнопки (Buttons)

Кнопки позволяют создать html-элемент с различными параметрами:

стиль;
размер;
действие на клик;
URL-ссылка;
текст;
иконка;
формат отображения.

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

Методы для работы с кнопками

C#

HtmlHelper.Button – метод, возвращающий строитель кнопок. Перегрузки метода:

Button(this HtmlHelper htmlHelper) – метод, возвращающий строитель кнопок и принимающий на вход только HtmlHelper;
Button(this HtmlHelper htmlHelper, ActionButton button) – принимает на вход модель кнопки ActionButton;
Button(this HtmlHelper htmlHelper, string icon, string text) – принимает на вход путь файла иконки и текст кнопки.

HtmlHelper.ImageButton – метод для построения кнопки с иконкой. Существует несколько перегрузок данного метода:

ImageButton(this HtmlHelper htmlHelper, string imageUrl) – принимает на вход путь до иконки и возвращает строитель кнопок, аналогичный HtmlHelper.Button();
ImageButton(this HtmlHelper htmlHelper, string imageUrl, string alt, string clickAction, object imgHtmlAttributes = null, object anchorHtmlAttributes = null, string text = "", bool textRight = true) – принимает на вход: imageUrl – ссылка на изображение, alt – наименование картинки, clickAction – действие на клик. Необязательные параметры: imgHtmlAttributes – атрибуты иконки, anchorHtmlAttributes – атрибуты кнопки, text – текст, textRight – отобразить текст справа. Возвращает готовую html-разметку кнопки с иконкой.

HtmlHelper.SwitchButton(this HtmlHelper htmlHelper, SwitchButtonModel model) – метод, возвращающий разметку кнопки-переключателя. Принимает на вход модель кнопки-переключателя.

HtmlHelper.FilterButton(this HtmlHelper htmlHelper) – метод для построения кнопки-фильтра. Возвращает строитель кнопки-фильтра. Подробнее: FilterButtonBuilder.

HtmlHelper.ArrowButton – метод для построения разметки кнопки с галочкой. Возвращает строку с разметкой. Перегрузки:

ArrowButton(this HtmlHelper htmlHelper, string name, string arrowTagId, bool isOpen) – принимает на вход название кнопки, идентификатор кнопки с галочкой, положение галки: true, если раскрыта, иначе – false;
ArrowButton(this HtmlHelper htmlHelper, MvcHtmlString name, string arrowTagId, bool isOpen) – принимает на вход название кнопки типа строки разметки, идентификатор кнопки с галочкой, положение галки: true, если раскрыта, иначе – false.

Основные методы строителя кнопок Html.Button():

Uid – установить уникальный идентификатор;
Text – установить текст для кнопки;
IconAttributes – установить атрибуты для иконки;
IconUrl – указать иконку для кнопки;
Disabled – сделать кнопку отключенной;
Style – задать стиль (цвет) кнопки. Подробнее в ButtonStyle;
Size – установить размер кнопки. Подробнее в UISize;
Template – задать шаблон содержимого кнопки. Может быть полезно, когда внутри кнопки необходимо отобразить собственную разметку;
Url – установить переход по ссылке на кнопку;
Click – установить действие на клик по кнопке;
AsLink – отобразить кнопку в виде ссылки;
Circle – отобразить кнопку в виде круга. Может быть полезно при отображении одной иконки;
NoFill – отобразить кнопку без заливки;
NoBorder – отобразить кнопку без рамки;
AsSwitcher – отобразить кнопку в виде переключателя;
Checked – задать значение для переключателя "Выбран / Не выбран";
ReadOnly – отобразить кнопку только для чтения (без границ и не работает наведение указателем). Может быть полезно, когда необходимо выровнять текст и иконку;
ReadOnlyHover – отобразить кнопку только для чтения (отображает кнопку без границ);
Buttons – добавить кнопки во внутрь кнопки. Подробнее можно посмотреть в ActionButtonBuilder.

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

//  Рендер круглой кнопки с иконкой большого размера красного цвета. При клике сработает вызов js-метода someAction()
@(Html.ImageButton("#control.svg")
    .Size(UISize.Large)
    .Style(ButtonStyle.Red)
    .Click("someAction()"))
//  Рендер кнопки без рамки и без заливки
@(Html.Button()
    .Text(SR.T("Кнопка без рамки и заливки"))
    .NoBorder()
    .NoFill())
//  Рендер кнопки c рамкой синего цвета
@(Html.Button()
    .Text(SR.T("Кнопка синего цвета"))
    .Style(ButtonStyle.Blue))
//  Рендер кнопки-переключателя
@Html.SwitchButton(new SwitchButtonModel
{
    Prefix = "Prefix",
    Target = "#SomeItem",
    EnumValues = new List<Enum> { ButtonStyle.Red, ButtonStyle.Blue },
    Value = (int)ButtonStyle.Red
})
//  Рендер кнопки-фильтра
@Html.FilterButton().Text(SR.T("Кнопка-фильтр"))
//  Рендер кнопки с галкой
@Html.ArrowButton(SR.T("Кнопка с галкой"), "arrowButton", true)

Пример отображения кнопок, отрисованных с помощью C#

JS

В JavaScript для создания кнопок может использоваться метод elma.Button.create(options).
Метод возвращает HtmlElement.
Для получения разметки необходимо обратиться к свойству outerHTML.
Данные кнопки имеют аналогичное представление, что и Button в C#.
В качестве опций используются:

url – ссылка;
text – текст кнопки;
attributes – атрибуты кнопки;
click – действие на клик;
isChecked – значение для переключателя "Выбран / Не выбран";
asLink – отобразить кнопку как ссылку;
disabled – отключить кнопку;
isCircle – отобразить кнопку в виде круга;
noFill – отобразить кноку без заливки;
noBorder – отобразить кнопку без рамки;
readOnly – отобразить кнопку только для чтения;
readOnlyHover – отобразить кнопку только для чтения, но с заливкой при наведении;
style – стиль кнопки.

Методы, доступные в elma.Button:

toggleCheck – переключить состояние кнопки в противоположное, если не указано состояние. Если указан параметр selected, то состояние переключается в значение, указанное в selected. Аргументы: button – кнопка, selected – состояние кнопки, необязательный параметр;
isCheck – получить состояние кнопки. Аргумент: button – кнопка;
setStyle – установить стиль для кнопки. Если стиль не задан или не входит в множество допустимых стилей – устанавливает стиль по умолчанию. Аргументы: button – кнопка, style – стиль кнопки.

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

//  Создание кнопки
var deleteButton = elma.Button.create({
    iconUrl: '#basket.svg',
    noBorder: true,
    isCircle: true,
    attributes: {
        tooltiptext: SR.T('Удалить')
    }
});
//  ...
//  установим стиль на красный
elma.Button.setStyle(deleteButton, "red");

Особенности работы с подкнопками

Подкнопки в кнопке построены на меню. При создании подкнопок вызывается Html.ActionMenu – стандартная реализация меню. При этом есть методы в JavaScript для работы с ним, расположенные в Elma.ElmaMenuMgr.

Обновление с ELMA3 на ELMA4

Некоторые методы были отмечены как устаревшие, необходимо заменить их на актуальные. Отмечены устаревшими:

public static string ImageButton(
    UrlHelper url,
    string imageUrl,
    string alt,
    string clickAction,
    object imgHtmlAttributes = null,
    object anchorHtmlAttributes = null,
    string text = "",
    bool textRight = true
)

public static string ImageLink(
    UrlHelper url,
    string imageUrl,
    string text,
    string href,
    object imgHtmlAttributes = null,
    object anchorHtmlAttributes = null,
    string title = "",
    bool textRight = true
)

public static string ImageHighlightLink(
    UrlHelper url,
    string imageUrl,
    string highlightText,
    string href,
    object imgHtmlAttributes = null,
    object anchorHtmlAttributes = null,
    string title = "",
    string openTag = null,
    string closeTag = null
)