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=30reversePosition="true",区域比为 70/30。默认 reversePosition="false"

locked

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

minSplitPosition 和 maxSplitPosition

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

如下所示,可以限制分隔条从组件左侧移动 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>