3.5.2.2.11. 分隔面板
在线示例
API 文档

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

gui 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。

    gui SplitPanel dockable

    停靠功能仅适用于水平方向的 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