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