logo

[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
)