3.5.2.2.11. 分隔面板

在线示例

API 文档

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

gui splitPanel

该组件的 XML 名称:split

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

  1. <split orientation="horizontal" pos="30" width="100%" height="100%">
  2. <vbox margin="true" spacing="true">
  3. <dateField dataContainer="orderDc" property="date" caption="Date"/>
  4. <lookupField dataContainer="orderDc" property="customer" optionsContainer="customersDc" caption="Customer"/>
  5. </vbox>
  6. <vbox margin="true" spacing="true">
  7. <textField dataContainer="orderDc" property="amount" caption="Amount"/>
  8. </vbox>
  9. </split>

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

split 的属性:

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

    gui SplitPanel dockable

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

  • dockMode - 定义停靠方向。可以使用 LEFTRIGHT 作为值。

    1. <split orientation="horizontal"
    2. dockable="true"
    3. dockMode="RIGHT">
    4. ...
    5. </split>
  • minSplitPositionmaxSplitPosition - 可以通过像素或百分比来定义分割条的可用位置范围。

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

    1. <split id="splitPanel" maxSplitPosition="300px" minSplitPosition="100px" width="100%" height="100%">
    2. <vbox margin="true" spacing="true">
    3. <button caption="Button 1"/>
    4. <button caption="Button 2"/>
    5. </vbox>
    6. <vbox margin="true" spacing="true">
    7. <button caption="Button 4"/>
    8. <button caption="Button 5"/>
    9. </vbox>
    10. </split>

    如果想以编程方式来设置范围,请使用 Component.UNITS_PIXELSComponent.UNITS_PERCENTAGE 来指定值的单位:

    1. splitPanel.setMinSplitPosition(100, Component.UNITS_PIXELS);
    2. splitPanel.setMaxSplitPosition(300, Component.UNITS_PIXELS);
  • orientation – 定义组件方向。horizontal- 嵌套的组件水平放置,vertical- 嵌套的组件垂直放置。
  • pos – 整数,定义第一个组件区域与第二个组件区域的百分比。例如,pos="30" 表示区域比例为 30/70。默认情况下,区域比例为 50/50。
  • reversePosition - 定义从组件的另一侧指定分隔条的 pos 属性。
  • 如果 locked 属性设置为 true,则用户无法更改分隔条位置。
  • 带有 large 值的 stylename 属性会使分隔条变地宽一点。

    1. split.setStyleName(HaloTheme.SPLITPANEL_LARGE);

SplitPanel 的方法:

  • 可以使用 getSplitPosition() 方法来获取分隔条的位置。
  • 可以使用 PositionUpdateListener() 方法来获取分隔条移动事件。可以使用 isUserOriginated() 方法来跟踪 SplitPositionChangeEvent 的来源。

  • 如果需要获取分隔条位置的单位,请使用 getSplitPositionUnit() 方法。返回值为 Component.UNITS_PIXELSComponent.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