logo

[ELMA4] Правая панель

При создании страницы с правой панелью требуется выполнить следующие действия.

Пример страницы с правой панелью

1. Правую и левую часть оберните в:

<div class="general-info-container">

2. Левую часть оберните в:

<div class ="general-info-container-left">

3. Правую часть оберните в:

@using (Html.CollapsiblePanel(new CollapsiblePanel { Id = "Айди правой панели", Expanded = true, Class = "separator-gray general-info-container-right", SaveState = false, Header = SR.T("Дополнительно") }))
{
    //some-code
}

Если вы не можете использовать using (правая часть находится внутри @<text></text>), используйте:

@Html.CollapsiblePanelBegin(cp)
        //some-code
    @Html.CollapsiblePanelEnd(cp)

где cpэто экземпляр CollapsiblePanel с такими же параметрами, как указаны выше.

Это необходимо сделать для адаптации мобильной версии ELMA. Таким образом правая панель свернется в раскрывающуюся панель Дополнительно.

Для кастомизации правой или левой части добавляйте свой класс к general-info-contaner-left/right. После кастомизации проверьте, что в мобильной адаптации все отображается корректно.

@using (Html.CollapsiblePanel(new CollapsiblePanel { Id = "Айди правой панели", Expanded = true, Class = "separator-gray general-info-container-right my-class", SaveState = false, Header = SR.T("Дополнительно") }))
{
    //some-code
}

Элементы внутри правой панели

Ячейка внутри правой панели строится с помощью div с классом brickPanel. Заголовок ячейки помещайте в div с классом brickTitle. Содержимое ячейки в div с классом brickContent.

<div class="brickPanel">
    <div class="brickTitle">
        Title
    </div>
    <div class="brickContent">
        Some content
    </div>
</div>

При добавлении CollapsiblePanel внутрь правой панели необходимо присвоить ей класс brickTitle.