sidePanelLayout

sidePanelLayout добавляет боковую панель, которая открывается рядом с основным содержимым или поверх него.

Боковую панель также можно создать программно с помощью бокового диалога.

XML-элемент	`sidePanelLayout`
Java-класс	`SidePanelLayout`

XML-элемент

sidePanelLayout

Java-класс

SidePanelLayout

Основы

SidePanelLayout разделяет содержимое на две области:

Основное содержимое — основная область контейнера.
Содержимое боковой панели — панель, которая выдвигается с одной из сторон.

Чтобы определить компонент в XML, используйте элемент sidePanelLayout и добавьте ровно два непосредственных дочерних компонента.

<sidePanelLayout id="sidePanelLayout"
                 width="100%"
                 height="100%">

    <vbox id="contentBox">
        <!-- Main content -->
    </vbox>

    <vbox id="sidePanelBox" width="100%" height="100%">

        <hbox id="headerBox" width="100%"> (1)
            <h2 text="Customer information"/>
            <sidePanelLayoutCloser/>
        </hbox>

        <!-- Side panel content -->

    </vbox>
</sidePanelLayout>

1	Боковая панель обычно содержит кнопку закрытия. Добавьте её с помощью специального компонента `sidePanelLayoutCloser`.

Открытие боковой панели

Боковая панель открывается в ответ на действия пользователя, например нажатие кнопки. Вызовите метод toggleSidePanel():

@ViewComponent
private SidePanelLayout sidePanelLayout;

@Subscribe(id = "toggleButton", subject = "clickListener")
public void onToggleButtonClick(final ClickEvent<JmixButton> event) {
    sidePanelLayout.toggleSidePanel();
}

Редактор в боковой панели

Используйте SidePanelLayout для шаблона «мастер — детали»: основная область содержит список сущностей, а боковая панель позволяет редактировать выбранный экземпляр.

Стилизация

Внешний вид и размер SidePanelLayout можно настроить с помощью CSS-переменных и селекторов темы.

Размеры с помощью CSS-переменных

Следующие переменные задают размер боковой панели. Установите их глобально или в селекторе конкретного sidePanelLayout.

Значения, заданные в XML или через Java API, имеют приоритет над CSS-переменными.

Горизонтальные боковые панели (LEFT, RIGHT, INLINE_START, INLINE_END):

Переменная	Описание	По умолчанию
`--jmix-side-panel-layout-horizontal-size`	Предпочтительная ширина боковой панели.	`auto`
`--jmix-side-panel-layout-horizontal-max-size`	Максимальная ширина.	`50%`
`--jmix-side-panel-layout-horizontal-min-size`	Минимальная ширина.	`14em`

Переменная

Описание

По умолчанию

--jmix-side-panel-layout-horizontal-size

Предпочтительная ширина боковой панели.

auto

--jmix-side-panel-layout-horizontal-max-size

Максимальная ширина.

50%

--jmix-side-panel-layout-horizontal-min-size

Минимальная ширина.

14em

Вертикальные боковые панели (TOP, BOTTOM):

Переменная	Описание	По умолчанию
`--jmix-side-panel-layout-vertical-size`	Предпочтительная высота боковой панели.	`auto`
`--jmix-side-panel-layout-vertical-max-size`	Максимальная высота.	`50%`
`--jmix-side-panel-layout-vertical-min-size`	Минимальная высота.	`10em`

Переменная

Описание

По умолчанию

--jmix-side-panel-layout-vertical-size

Предпочтительная высота боковой панели.

auto

--jmix-side-panel-layout-vertical-max-size

Максимальная высота.

50%

--jmix-side-panel-layout-vertical-min-size

Минимальная высота.

10em

Внешний вид

Переменная	Описание	По умолчанию
`--jmix-side-panel-layout-transition-duration`	Задаёт длительность анимации открытия и закрытия.	`200ms`

Переменная

Описание

По умолчанию

--jmix-side-panel-layout-transition-duration

Задаёт длительность анимации открытия и закрытия.

200ms

Части

SidePanelLayout предоставляет следующие части, доступные для стилизации:

Часть	Описание
`jmix-side-panel-layout::part(layout)`	Контейнер для содержимого, боковой панели и модальной подложки.
`jmix-side-panel-layout::part(content)`	Основное содержимое контейнера.
`jmix-side-panel-layout::part(modalityCurtain)`	Модальная подложка.
`jmix-side-panel-layout::part(sidePanel)`	Панель, которая выдвигается и скрывается.
`jmix-side-panel-layout::part(sidePanelContent)`	Контейнер содержимого боковой панели.

Часть

Описание

jmix-side-panel-layout::part(layout)

Контейнер для содержимого, боковой панели и модальной подложки.

jmix-side-panel-layout::part(content)

Основное содержимое контейнера.

jmix-side-panel-layout::part(modalityCurtain)

Модальная подложка.

jmix-side-panel-layout::part(sidePanel)

Панель, которая выдвигается и скрывается.

jmix-side-panel-layout::part(sidePanelContent)

Контейнер содержимого боковой панели.

Состояния

Компонент предоставляет следующие состояния:

Состояние	Описание
`jmix-side-panel-layout[side-panel-opened]`	Применяется, когда боковая панель открыта.
`jmix-side-panel-layout[modal]`	Применяется, когда боковая панель модальная.
`jmix-side-panel-layout[side-panel-position='left']`	Соответствует текущему положению боковой панели (`right`, `top` и т. д.).
`jmix-side-panel-layout[side-panel-overlay]`	Применяется, когда панель перекрывает содержимое, а не сдвигает его.

Состояние

Описание

jmix-side-panel-layout[side-panel-opened]

Применяется, когда боковая панель открыта.

jmix-side-panel-layout[modal]

Применяется, когда боковая панель модальная.

jmix-side-panel-layout[side-panel-position='left']

Соответствует текущему положению боковой панели (right, top и т. д.).

jmix-side-panel-layout[side-panel-overlay]

Применяется, когда панель перекрывает содержимое, а не сдвигает его.

Атрибуты

Общие атрибуты имеют одинаковое назначение для всех компонентов. Следующие атрибуты относятся только к sidePanelLayout.

Имя Описание По умолчанию

Имя	Описание	По умолчанию
sidePanelPosition	Задаёт сторону, с которой появляется панель. Возможные значения: `LEFT`, `RIGHT`, `TOP`, `BOTTOM`, `INLINE_START` и `INLINE_END`. `INLINE_START` и `INLINE_END` учитывают направление чтения страницы (LTR или RTL).	`RIGHT`
sidePanelOverlay	Задаёт взаимодействие боковой панели с основным содержимым. Если установлено значение `true`, панель перекрывает содержимое, не меняя его компоновку. Если установлено значение `false`, при открытии панель сдвигает содержимое.	`true`
modal	Если установлено значение `true`, за боковой панелью появляется модальная подложка, которая блокирует взаимодействие с основным содержимым до закрытия панели.	`true`
closeOnOutsideClick	Если установлено значение `true`, нажатие на модальную подложку закрывает боковую панель. Атрибут действует, только если включён modal.	`true`
overlayAriaLabel	Задаёт доступную надпись для элемента перекрытия.	—
displayAsOverlayOnSmallDevices	Если установлено значение `true`, на небольших устройствах боковая панель отображается как полноэкранное перекрытие, чтобы содержимое оставалось удобным на мобильных устройствах.	`true`
sidePanelHorizontalSize	Задаёт ширину боковой панели, когда её положение — `LEFT`, `RIGHT`, `INLINE_START` или `INLINE_END`. Значением может быть любой допустимый CSS-размер, например `400px`, `30%` или `auto`.	`auto`
sidePanelHorizontalMinSize	Задаёт минимальную ширину горизонтально расположенной боковой панели.	`14em`
sidePanelHorizontalMaxSize	Задаёт максимальную ширину горизонтально расположенной боковой панели.	`50%`
sidePanelVerticalSize	Задаёт высоту боковой панели, когда она появляется сверху или снизу.	`auto`
sidePanelVerticalMinSize	Задаёт минимальную высоту боковой панели.	`10em`
sidePanelVerticalMaxSize	Задаёт максимальную высоту боковой панели.	`50%`

sidePanelPosition

Задаёт сторону, с которой появляется панель. Возможные значения: LEFT, RIGHT, TOP, BOTTOM, INLINE_START и INLINE_END.

INLINE_START и INLINE_END учитывают направление чтения страницы (LTR или RTL).

RIGHT

sidePanelOverlay

Задаёт взаимодействие боковой панели с основным содержимым.

Если установлено значение true, панель перекрывает содержимое, не меняя его компоновку. Если установлено значение false, при открытии панель сдвигает содержимое.

true

modal

Если установлено значение true, за боковой панелью появляется модальная подложка, которая блокирует взаимодействие с основным содержимым до закрытия панели.

true

closeOnOutsideClick

Если установлено значение true, нажатие на модальную подложку закрывает боковую панель.

Атрибут действует, только если включён modal.

true

overlayAriaLabel

Задаёт доступную надпись для элемента перекрытия.

—

displayAsOverlayOnSmallDevices

Если установлено значение true, на небольших устройствах боковая панель отображается как полноэкранное перекрытие, чтобы содержимое оставалось удобным на мобильных устройствах.

true

sidePanelHorizontalSize

Задаёт ширину боковой панели, когда её положение — LEFT, RIGHT, INLINE_START или INLINE_END.

Значением может быть любой допустимый CSS-размер, например 400px, 30% или auto.

auto

sidePanelHorizontalMinSize

Задаёт минимальную ширину горизонтально расположенной боковой панели.

14em

sidePanelHorizontalMaxSize

Задаёт максимальную ширину горизонтально расположенной боковой панели.

50%

sidePanelVerticalSize

Задаёт высоту боковой панели, когда она появляется сверху или снизу.

auto

sidePanelVerticalMinSize

Задаёт минимальную высоту боковой панели.

10em

sidePanelVerticalMaxSize

Задаёт максимальную высоту боковой панели.

50%

Обработчики

Общие обработчики настраиваются одинаково для всех компонентов. Следующие обработчики относятся только к sidePanelLayout.

Имя	Описание
ModalityCurtainClickEvent	Срабатывает, когда пользователь нажимает на модальную подложку.
SidePanelBeforeOpenEvent	Срабатывает до отображения боковой панели и начала анимации открытия. Используйте его, чтобы обновить содержимое до появления панели.
SidePanelAfterOpenEvent	Срабатывает после полного открытия боковой панели и завершения анимации.
SidePanelCloseEvent	Срабатывает при закрытии боковой панели.

Имя

Описание

ModalityCurtainClickEvent

Срабатывает, когда пользователь нажимает на модальную подложку.

SidePanelBeforeOpenEvent

Срабатывает до отображения боковой панели и начала анимации открытия. Используйте его, чтобы обновить содержимое до появления панели.

SidePanelAfterOpenEvent

Срабатывает после полного открытия боковой панели и завершения анимации.

SidePanelCloseEvent

Срабатывает при закрытии боковой панели.

Элементы

sidePanelLayout содержит ровно два корневых компонента: основное содержимое и содержимое боковой панели. Если панели нужна отдельная кнопка закрытия, добавьте в неё sidePanelLayoutCloser.