SplitPanel 分隔面板

在线示例

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

split panel vertical

组件的 XML 名称：split。

基本用法

SplitPanel 容器必须包含两个内部的容器或组件。它们将显示在分隔条的两侧。

示例：

<split height="300px"
       width="100%">
    <vbox height="100%"
          margin="true">
        <label value="Label"/>
        <textField inputPrompt="TextField"/>
        <hbox spacing="true">
            <button caption="Button"/>
            <button caption="Button"/>
        </hbox>
    </vbox>
    <vbox height="100%"
          margin="true">
        <label value="Label"/>
        <textField inputPrompt="TextField"/>
        <hbox spacing="true">
            <button caption="Button"/>
            <button caption="Button"/>
        </hbox>
    </vbox>
</split>

属性

orientation

orientation 属性定义组件的方向，可能值：

  • vertical - 内部组件垂直放置，默认值。

  • horizontal - 内部组件水平放置。

    split panel horizontal

dockable

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

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

dockMode

dockMode 定义停靠方向。仅当 dockable="true" 时有效。取值为：

  • LEFT - 默认

    split panel dock left

  • RIGHT

    split panel dock right

pos

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

reversePosition

reversePosition 属性表示 pos 属性指定的是从反方向指定分隔条的位置。例如，如果 pos=30 和 reversePosition="true"，区域比为 70/30。默认 reversePosition="false"。

locked

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

minSplitPosition 和 maxSplitPosition

minSplitPosition 和 maxSplitPosition 属性可以通过像素或百分比来定义分割条的可移动范围。

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

<split minSplitPosition="100px"
       maxSplitPosition="300px"
       orientation="horizontal"
       pos="200px"
       height="100%"
       width="100%">
    <vbox height="100%" width="100%">
        <label value="Label"/>
        <textField inputPrompt="TextField"/>
        <hbox spacing="true">
            <button caption="Button"/>
            <button caption="Button"/>
        </hbox>
    </vbox>
    <vbox height="100%" width="100%">
        <label value="Label"/>
        <textField inputPrompt="TextField"/>
        <hbox spacing="true">
            <button caption="Button"/>
            <button caption="Button"/>
        </hbox>
    </vbox>
</split>

XML 属性

align - box.expandRatio - caption - captionAsHtml - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - description - descriptionAsHtml - dockMode - dockable - enable - height - htmlSanitizerEnabled - icon - id - locked - maxSplitPosition - minSplitPosition - orientation - pos - responsive - reversePosition - rowspan - stylename - visible - width