QSplitter

QSplitter组件允许通过可拖动的分隔条在垂直和/或水平方向上拆分容器。

QSplitter API

Loading API...

用法

WARNING

需要使用beforeafter插槽。

单击并拖动分离分隔条以查看结果。

基础

Basic



水平

Horizontal



自定义拖动限制

Adding to separator



模型单位

默认情况下,使用的CSSunit为“%”(百分比)。 但您也可以使用“px”(像素),如下例所示。

Model in pixels



反转模型

默认情况下,模型连接到before插槽尺寸。 但是您可以颠倒它,并使其连接到after插槽,如以下示例所示。 如果将unit设置为像素并且要控制after插槽,则此功能特别有用。

Reverse model



向分隔符添加内容

TIP

如果使用图像作为分隔符插槽的内容,则可能需要将draggable="false"添加到图像中,否则本地浏览器行为可能会以负面方式干扰。

Adding to separator



暗色设计

Custom dragging limits (50-100)



嵌入式的

On a dark background with customized separator



QSplitter可以嵌入另一个QSplitter的before和/或after插槽中,如下面的示例所示。

有趣的例子

Embedded



Image Fun



Reactive Images