split 分隔布局

split 创建两块内容区域，由一个可拖拽的分隔条区分。

XML 元素

split

Java 类

JmixSplitLayout

概览

split basic

基本用法

在线示例

split 必须且只能包含两个内部的容器或组件。该示例为第一个区域分配 45% 的可用空间，使用 splitterPosition="45"，并在第二个区域中嵌套了一个垂直 split。用户可以拖动任何一个分割条调整区域的大小。

<split width="100%" themeNames="splitter-spacing" splitterPosition="45">
    <textArea label="TextArea1" width="100%" height="100%"/>
    <split orientation="VERTICAL">
        <textArea label="TextArea2" width="100%" height="100%"/>
        <textArea label="TextArea3" width="100%" height="100%"/>
    </split>
</split>

样式版本

在线示例

使用 themeNames 设置组件的样式。

样式 描述 支持的主题

minimal

隐藏分隔布局的样式。

Aura, Lumo

small

使用一个更薄的分隔符，只有鼠标悬停才会出现。

Aura, Lumo

splitter-spacing

在分隔符周边添加一些空白。

Aura, Lumo

XML 属性

通用属性 对所有组件都是一样的配置。下面是 split 的特殊属性：

名称 描述 默认值

orientation

定义组件的分隔方向：HORIZONTAL - 水平分隔；VERTICAL - 垂直分隔。

HORIZONTAL

splitterPosition

设置初始时分隔条的位置，使用百分数设置。

—

事件和处理器

下面是 split 的特殊事件和处理器：

名称 描述

ClickEvent

当用户点击布局时触发。

下面是 split 支持的其他通用事件：

AttachEvent - DetachEvent

XML 内部元素

一个 split 必须且只能包含两个内部的容器或组件，分别表示分隔的两个内容区域。

参考