sidePanelLayout 侧边面板
sidePanelLayout 打开一个在主内容不同侧边或覆盖主内容的面板。
| 也可以使用 侧边对话框 以编程方式创建侧边面板。 |
XML 元素 |
|
|---|---|
Java 类 |
|
基本用法
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>侧边面板一般会包含一个关闭按钮。使用专门的 sidePanelLayoutCloser 组件添加这个按钮。
打开侧边面板
侧边面板在用户操作时打开，比如点击按钮。需要调用 toggleSidePanel() 方法：
@ViewComponent
private SidePanelLayout sidePanelLayout;
@Subscribe(id = "toggleButton", subject = "clickListener")
public void onToggleButtonClick(final ClickEvent<JmixButton> event) {
sidePanelLayout.toggleSidePanel();
}调整侧面板大小
Jmix 3.1+
将 sidePanelResizable 属性设置为 true，允许用户通过拖动侧面板内侧边缘的手柄来调整其大小。
<facets>
<settings auto="true"/>
</facets>
<sidePanelLayout id="sidePanelLayout"
width="100%"
height="100%"
sidePanelResizable="true">
<!-- ... -->
</sidePanelLayout>
</layout>对于 LEFT、RIGHT、INLINE_START 和 INLINE_END 位置，拖动会更改面板宽度。对于 TOP 和 BOTTOM 位置，拖动会更改面板高度。尺寸保持在最小和最大尺寸属性定义的范围内。
|
如需保存和恢复当前用户选择的大小，请添加 |
样式
使用 CSS 变量和主题选择器可以自定义 SidePanelLayout 的外观和大小。
尺寸
下列变量定义了侧面板的尺寸。可以全局设置，或在 CSS 选择器中对特定的 SidePanelLayout 设置。
| 在 XML 中设置或使用 Java API 设置的值会覆盖 CSS 变量。 |
水平侧边面板（LEFT、RIGHT、INLINE_START、INLINE_END）：
变量 |
描述 |
默认值 |
|---|---|---|
|
侧边面板的默认宽度。 |
|
|
最大宽度。 |
|
|
最小宽度。 |
|
垂直侧边面板（TOP、BOTTOM）：
变量 |
描述 |
默认值 |
|---|---|---|
|
侧边面板的默认高度。 |
|
|
最大高度。 |
|
|
最小高度。 |
|
调整大小手柄
Jmix 3.1+
调整大小手柄使用以下 CSS 变量。其默认值与当前主题 SplitLayout 的分隔条一致，并且在使用 resizer-small 主题时可能会改变。
变量 |
描述 |
|---|---|
|
垂直分隔条的宽度或水平分隔条的高度。 |
|
分隔条上指针目标区域的大小。 |
|
分隔条背景。 |
|
分隔条内握柄的厚度。 |
|
分隔条内握柄的长度。 |
|
握柄背景。 |
parts
SidePanelLayout 开放了以下 可样式化的 parts：
部分 |
描述 |
|---|---|
|
内容、侧边面板和模态遮罩的容器。 |
|
主布局内容。 |
|
模态遮罩层。 |
|
移入、移出视图的面板。 |
|
侧边面板内容容器。 |
|
侧面板内边缘的调整手柄。 |
状态
组件开放了以下 状态：
状态 |
描述 |
|---|---|
|
当侧边面板打开时使用。 |
|
当侧边面板为模态时使用。 |
|
匹配当前的侧边面板位置（ |
|
当面板覆盖内容而不是推开内容时使用。 |
|
用户调整大小启用时使用。 |
|
用户拖拽调整手柄时使用。 |
XML 属性
通用属性 对所有组件都是一样的配置。下面是 sidePanelLayout 的特殊属性：
| 名称 | 描述 | 默认值 |
|---|---|---|
定义面板出现在哪个侧边。可选值为
|
|
|
决定侧边面板与主内容的交互方式。 如果为 |
|
|
当为 |
|
|
当为 此属性仅在启用 modal 时有效。 |
|
|
设置覆盖元素的可访问标签。 |
– |
|
如果为 |
|
|
如果为 Jmix 3.1+ |
|
|
定义当侧边面板的位置为 值可以是任何有效的 CSS 尺寸，例如 |
|
|
定义水平放置的侧面板的最小宽度。 |
|
|
定义水平放置的侧边面板的最大宽度。 |
|
|
定义侧边面板从顶部或底部出现时的垂直尺寸。 |
|
|
定义侧边面板的最小垂直尺寸。 |
|
|
定义侧边面板的最大垂直尺寸。 |
|
事件和处理器
通用事件和处理器 对所有组件都是一样的配置。下面是 sidePanelLayout 的特殊事件和处理器：
| 名称 | 描述 |
|---|---|
当用户点击模态遮罩层时触发。 |
|
在侧边面板显示之前以及开启动画开始之前触发。使用此事件可在面板变得可见之前修改内容。 |
|
在侧边面板完全打开且开启动画完成之后触发。 |
|
当侧边面板关闭时触发。 |
|
当用户拖动调整的手柄完成且面板大小发生变化后触发一次。 Jmix 3.1+ |