布局容器 - 分隔面板 - 《CUBA 框架开发者手册 Version 7.1》

3.5.2.2.11. 分隔面板

3.5.2.2.11. 分隔面板

SplitPanel − 由可移动的分隔条分隔成两个区域的容器。

该组件的 XML 名称：split

下面是一个分隔面板的 XML 描述示例：

<split orientation="horizontal" pos="30" width="100%" height="100%">
    <vbox margin="true" spacing="true">
        <dateField dataContainer="orderDc" property="date" caption="Date"/>
        <lookupField dataContainer="orderDc" property="customer" optionsContainer="customersDc" caption="Customer"/>
    </vbox>
    <vbox margin="true" spacing="true">
        <textField dataContainer="orderDc" property="amount" caption="Amount"/>
    </vbox>
</split>

split 容器必须包含两个嵌套的容器或组件。它们将显示在分隔条的两侧。

split 的属性:

dockable - 启用或禁用 SplitPanel 停靠按钮，默认值为 false。

停靠功能仅适用于水平方向的 SplitPanel。

dockMode - 定义停靠方向。可以使用 LEFT 或 RIGHT 作为值。

<split orientation="horizontal"
       dockable="true"
       dockMode="RIGHT">
    ...
</split>

minSplitPosition 、 maxSplitPosition - 可以通过像素或百分比来定义分割条的可用位置范围。

如下所示，可以限制分隔条从组件左侧移动 100 到 300 像素：

<split id="splitPanel" maxSplitPosition="300px" minSplitPosition="100px" width="100%" height="100%">
    <vbox margin="true" spacing="true">
        <button caption="Button 1"/>
        <button caption="Button 2"/>
    </vbox>
    <vbox margin="true" spacing="true">
        <button caption="Button 4"/>
        <button caption="Button 5"/>
    </vbox>
</split>

如果想以编程方式来设置范围，请使用 Component.UNITS_PIXELS 或 Component.UNITS_PERCENTAGE 来指定值的单位：

splitPanel.setMinSplitPosition(100, Component.UNITS_PIXELS);
splitPanel.setMaxSplitPosition(300, Component.UNITS_PIXELS);

orientation – 定义组件方向。horizontal- 嵌套的组件水平放置，vertical- 嵌套的组件垂直放置。

pos – 整数，定义第一个组件区域与第二个组件区域的百分比。例如，pos="30" 表示区域比例为 30/70。默认情况下，区域比例为 50/50。

reversePosition - 定义从组件的另一侧指定分隔条的 pos 属性。

如果 locked 属性设置为 true，则用户无法更改分隔条位置。

带有 large 值的 stylename 属性会使分隔条变地宽一点。
```
split.setStyleName(HaloTheme.SPLITPANEL_LARGE);
```

SplitPanel 的方法:

可以使用 getSplitPosition() 方法来获取分隔条的位置。

可以使用 PositionUpdateListener() 方法来获取分隔条移动事件。可以使用 isUserOriginated() 方法来跟踪 SplitPositionChangeEvent 的来源。
如果需要获取分隔条位置的单位，请使用 getSplitPositionUnit() 方法。返回值为 Component.UNITS_PIXELS 或 Component.UNITS_PERCENTAGE。
如果从组件的另一侧设置位置，那么 isSplitPositionReversed() 方法会返回 true。

SplitPanel 的展示可以使用带 $cuba-splitpanel-* 前缀的 SCSS 变量进行自定义。可以在创建一个主题扩展或者一个自定义主题之后在可视化编辑器里修改这些变量的值。

split 的属性

align - caption - captionAsHtml - contextHelpText - contextHelpTextHtmlEnabled - css - description - descriptionAsHtml - dockable - dockMode - box.expandRatio - height - id - locked - minSplitPosition - maxSplitPosition - orientation - pos - reversePosition - settingsEnabled - stylename - width

API

add - addPositionUpdateListener - applySettings - getComponent - getComponentNN - getComponents - getOwnComponent - getOwnComponents - remove - removeAll - saveSettings