[ELMA4] Панель инструментов (Toolbar)

По умолчанию в панели инструментов доступны две кнопки: Назад и Еще.

Кнопка Еще добавляется по умолчанию с идентификатором [ToolbarBuilder.MoreButtonUid](xref:EleWise.ELMA.Web.Mvc.Html.Toolbar.ToolbarBuilder.MoreButtonUid).

Идентификатор группы [ToolbarBuilder.MoreButtonGroupUid](xref:EleWise.ELMA.Web.Mvc.Html.Toolbar.ToolbarBuilder.MoreButtonGroupUid).

Методы для работы

C#

Html.Toolbar().Group("test") регистрация панели инструментов с группой test.

.Buttons(a => { .. }) добавление кнопок.

.AdditionButtons(a => { .. }) добавление кнопок в Еще.

Пример: добавление панели инструментов с одной кнопкой.

@{
    Html.Toolbar()
        .Group("main")
        .Button(a => a
            .Uid("create-absence")
            .Text(SR.T("Назначить отсутствие"))
            .Url("#")
            .IconUrl("#add.svg")
            .MainAction());
}

Настройки кнопки:

  • Uid идентификатор кнопки;
  • Text текст;
  • Url ссылка;
  • Click действие;
  • IconUrl иконка;
  • MainAction отображает кнопку зеленого цвета, не скрывается при адаптивности и в мобильной версии;
  • AbortAction отображает кнопку красного цвета, не скрывается при адаптивности и в мобильной версии;
  • Buttons(a => { ... }) вложенные кнопки. Используется стандартная реализация. Подробнее о кнопках читайте в этой статье;
  • Visible если кнопка скрыта, то она не отрисовывается;
  • Hidden кнопка рисуется, но пользователь ее не видит. Полезно при изменении видимости из скриптов.

Пример: добавление кнопки с вложенными в нее кнопками.

Html.Toolbar()
    .Group("main")
    .Button(bDo => bDo
        .Uid("toolbar-button-actions")
        .Text(SR.T("Действия"))
        .IconUrl("#task.svg")
        .Buttons(t =>
        {
            t.Button(b => b
                .Uid("toolbar-click-managewatchers")
                .Text(SR.T("Список наблюдателей"))
                .IconUrl("#add.svg")
                .Click("click()")
            );
        })
    )

JS

elma.toolbar.button получение кнопки панели инструментов.

elma.toolbar.showOrHideButton скрыть/отобразить кнопку.

elma.toolbar.getUid получить идентификатор uid кнопки.

Точки расширения

IActionItemProvider провайдер для добавления кнопок. Ознакомиться с примером реализации можно в этой статье.

Основные изменения в ELMA4 по сравнению с ELMA3

1. Изменено отображение панели инструментов. Кнопки изменены с кастомной разметки на компонент Html.Button.

Панель инструментов в ELMA3:

Панель инструментов в ELMA4:

2. Добавлен метод в настройки кнопки AbortAction.

3. Добавлена кнопка Еще.

4. Обновлен метод elma.toolbar.button('uid').button.