[ELMA4] Сворачиваемая панель (CollapsiblePanel)

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

Id – идентификатор панели на странице.

Заголовок:

• Header – простой текстовый заголовок;
• LinkHeader – ссылка, по которой осуществляется переход при нажатии на заголовок;
• HeaderExt – заголовок, который может содержать html-разметку;
• ImageUrl – иконка перед заголовком.

Контент. Существует два варианта задания контента панели:

• Content – контент панели, который задается при определении панели. Представляет собой html-разметку;
• Url – ссылка на контент панели для его динамической загрузки.

Html-атрибуты:

• Style – html-атрибуты;
• Class – html-class, который добавляется на заголовок.

Состояние панели:

• Expanded – флаг состояния панели. Если true, то панель развернута, false – свернута;
• SaveState – флаг, задающий возможность сохранения состояния панели. Если установлен true, то при следующем открытии страницы с панелью она будет развернута/свернута в зависимости от ее предыдущего состояния;
• OnExpand – JavaScript функция, которая срабатывает при развертывании/свертывании панели.

Существует несколько способов объявления панели в зависимости от контента:

1.Контент передается в билдер панели, в метод Content. Нельзя использовать этот способ, если панель объявляется внутри обертки @<text></text>.

@(Html.CollapsiblePanel()
    .Id("ExamplePanel")
    .Header(SR.T("Дополнительная информация"))
    .SaveState(true)
    .Expanded(true)
    .Class("separator-gray")
    .Content(@<text><div>Контент</div></text>).Render())

2. Контент панели оборачивается в директиву using. Нельзя использовать этот способ, если панель объявляется внутри обертки @<text></text>.

var cp = new CollapsiblePanel()
{
    Id = "ExamplePanel",
    Header = SR.T("Дополнительная информация"),
    SaveState = true,
    Expanded = true,
    Class = "separator-gray"
};

@using (Html.CollapsiblePanel(cp))
{
    <div>Контент</div>
}

3. Панель объявляется с помощью методов Html.CollapsiblePanelBegin и Html.CollapsiblePanelEnd, между которыми располагается контент панели. Это единственный способ, который можно использовать, если панель объявляется внутри обертки @<text></text>.

var cp = new CollapsiblePanel()
{
    Id = "ExamplePanel",
    Header = SR.T("Дополнительная информация"),
    SaveState = true,
    Expanded = true,
    Class = "separator-gray"
};

@Html.CollapsiblePanelBegin(cp)
    <div>Контент</div>
@Html.CollapsiblePanelEnd(cp)

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

1. Внешний вид.
Cворачиваемая панель в ELMA3:

Cворачиваемая панель в ELMA4:

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

// bad
@(Html.CollapsiblePanel()
    .Header(SR.T("Панель"))
    .Class("separator-red")
    .Content(@<text><div>Контент</div></text>).Render())

// good
    @(Html.CollapsiblePanel()
    .Header(SR.T("Панель"))
    .Class("separator-gray")
    .Content(@<text><div>Контент</div></text>).Render())

3. Отступы контента панелей изменились на 16px сверху и снизу, 8px по бокам.