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