sidePanelLayout

Компонент компоновки с боковой панелью. Панель может открываться с разных сторон и либо перекрывать основное содержимое, либо сдвигать его. Подходит для отображения фильтров, дополнительной информации или форм редактирования одновременно с основным содержимым.

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

XML Элемент

sidePanelLayout

Java Класс

SidePanelLayout

Атрибуты

General: id - modal - closeOnOutsideClick - displayAsOverlayOnSmallDevices - visible

Position: alignSelf - justifySelf - colspan

Size: sidePanelHorizontalSize - sidePanelHorizontalMinSize - sidePanelHorizontalMaxSize - sidePanelVerticalSize - sidePanelVerticalMinSize - sidePanelVerticalMaxSize - height - width - maxHeight - maxWidth - minHeight - minWidth

Look & Feel: css - sidePanelOverlay - sidePanelPosition

Other: closeOnOutsideClick - displayAsOverlayOnSmallDevices - modal - overlayAriaLabel

Handlers

AttachEvent - DetachEvent - ModalityCurtainClickEvent - SidePanelBeforeOpenEvent - SidePanelAfterOpenEvent - SidePanelCloseEvent

Основы

SidePanelLayout делит экран на две части:

  • Основная область – содержащая основной контент страницы.

  • Боковая панель — появляется сбоку.

side panel layout basic

В 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 для реализации паттерна master-detail, где основная область содержит список сущностей, а боковая панель используется для редактирования выбранного экземпляра.

side panel layout editor

Стилизация

Вы можете настроить внешний вид и размеры 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

Вертикальные панели (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-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(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]

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

Атрибуты

Общие атрибуты имеют одинаковое назначение для всех компонентов. Ниже приведены атрибуты, специфичные для sidePanelLayout.

Имя

Описание

По умолчанию

sidePanelPosition

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

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

RIGHT

sidePanelOverlay

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

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

true

modal

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

true

closeOnOutsideClick

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

Этот атрибут действует только при включённом modal.

true

overlayAriaLabel

Sets the accessible label for the overlay element.

–

displayAsOverlayOnSmallDevices

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

true

sidePanelHorizontalSize

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

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

auto

sidePanelHorizontalMinSize

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

–

sidePanelHorizontalMaxSize

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

–

sidePanelVerticalSize

Определяет вертикальный размер панели, если она появляется сверху или снизу.

auto

sidePanelVerticalMinSize

Определяет минимальный вертикальный размер панели.

–

sidePanelVerticalMaxSize

Определяет максимальный вертикальный размер панели.

–

Обработчики

Общие обработчики настраиваются одинаково для всех компонентов. Ниже приведены обработчики, специфичные для sidePanelLayout.

Имя

Описание

ModalityCurtainClickEvent

Срабатывает при клике пользователя по модальному фону.

SidePanelBeforeOpenEvent

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

SidePanelAfterOpenEvent

Срабатывает после полного открытия панели.

SidePanelCloseEvent

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