sidePanelLayout 侧边面板
这是一个布局组件，在页面中添加一个可以从不同侧边打开的面板，可以覆盖或推开主要内容。用于需要与主要内容一起显示的上下文信息、过滤器或编辑器。
| 也可以使用 侧边对话框 以编程方式创建侧边面板。 |
XML 元素 |
|
|---|---|
Java 类 |
|
XML 属性 |
通用： id - modal - closeOnOutsideClick - displayAsOverlayOnSmallDevices - visible |
位置： alignSelf - justifySelf - colspan |
|
尺寸： sidePanelHorizontalSize - sidePanelHorizontalMinSize - sidePanelHorizontalMaxSize - sidePanelVerticalSize - sidePanelVerticalMinSize - sidePanelVerticalMaxSize - height - width - maxHeight - maxWidth - minHeight - minWidth |
|
外观： css - sidePanelOverlay - sidePanelPosition |
|
其他： closeOnOutsideClick - displayAsOverlayOnSmallDevices - modal - overlayAriaLabel |
|
事件和处理器 |
AttachEvent - DetachEvent - ModalityCurtainClickEvent - SidePanelBeforeOpenEvent - SidePanelAfterOpenEvent - SidePanelCloseEvent |
基本用法
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();
}
样式
使用 CSS 变量和主题选择器可以自定义 SidePanelLayout 的外观和大小。
尺寸
下列全局变量定义了侧边面板的尺寸。对所有 SidePanelLayout 实例有效。
| 在 XML 中设置或使用 Java API 设置的值会覆盖 CSS 变量。 |
水平侧边面板（LEFT、RIGHT、INLINE_START、INLINE_END）：
变量 |
描述 |
默认值 |
|---|---|---|
|
侧边面板的默认宽度。 |
|
|
最大宽度。 |
|
|
最小宽度。 |
|
垂直侧边面板（TOP、BOTTOM）：
变量 |
描述 |
默认值 |
|---|---|---|
|
侧边面板的默认高度。 |
|
|
最大高度。 |
|
|
最小高度。 |
|
parts
SidePanelLayout 开放了以下 可样式化的 parts：
部分 |
描述 |
|---|---|
|
内容、侧边面板和模态遮罩的容器。 |
|
主布局内容。 |
|
模态遮罩层。 |
|
侧边面板内容容器。 |
状态
组件开放了以下 状态：
状态 |
描述 |
|---|---|
|
当侧边面板打开时使用。 |
|
当侧边面板为模态时使用。 |
|
匹配当前的侧边面板位置（ |
|
当面板覆盖内容而不是推开内容时使用。 |
XML 属性
通用属性 对所有组件都是一样的配置。下面是 sidePanelLayout 的特殊属性：
名称 |
描述 |
默认值 |
|---|---|---|
定义面板出现在哪个侧边。可选值为
|
|
|
决定侧边面板与主内容的交互方式。 如果为 |
|
|
当为 |
|
|
当为 此属性仅在启用 modal 时有效。 |
|
|
设置覆盖元素的可访问标签。 |
– |
|
如果为 |
|
|
定义侧边面板位于布局左侧或右侧时的水平尺寸。 值可以是任何有效的 CSS 尺寸，例如 |
|
|
定义侧边面板位于左侧或右侧时的最小水平尺寸。 |
– |
|
定义侧边面板位于左侧或右侧时的最大水平尺寸。 |
– |
|
定义侧边面板从顶部或底部出现时的垂直尺寸。 |
|
|
定义侧边面板的最小垂直尺寸。 |
– |
|
定义侧边面板的最大垂直尺寸。 |
– |
事件和处理器
通用事件和处理器 对所有组件都是一样的配置。下面是 sidePanelLayout 的特殊事件和处理器：
名称 |
描述 |
|---|---|
当用户点击模态遮罩层时触发。 |
|
在侧边面板打开之前、显示之前以及开启动画开始之前触发。使用此事件可在面板变得可见之前修改内容。 |
|
在侧边面板完全打开且开启动画完成之后触发。 |
|
当侧边面板关闭时触发。 |
