API 浏览器
QSplitter

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

¥The QSplitter component allow containers to be split vertically and/or horizontally through a draggable separator bar.

Loading QSplitter API...

用法(Usage)

¥Usage

警告

必须使用 beforeafter 插槽。

¥The use of the before and after slots is required.

点击并拖动分隔条即可查看结果。

¥Click and drag on the splitter separator bar to see results.

基本(Basic)

¥Basic

Basic



水平(Horizontal)

¥Horizontal

Horizontal



自定义拖动限制(Custom dragging limits)

¥Custom dragging limits

Custom dragging limits (50-100)



模型单位(Model units)

¥Model units

默认情况下,使用的 CSS unit 是 ‘%’(百分比)。但是你也可以使用 ‘px’(像素),如下例所示。

¥By default, the CSS unit used is ‘%’ (percentage). But you can also use ‘px’ (pixels), as in the example below.

Model in pixels



反向模型(Reverse model)

¥Reverse model

默认情况下,模型连接到 before 插槽大小。但是你可以反转它并将其连接到 after 插槽,如下例所示。如果你的 unit 设置为像素,并且你想要控制 after 插槽,则此功能特别有用。

¥By default, the model is connected to the before slot size. But you can reverse that and make it connect to the after slot, as in the example below. This feature turns out especially useful if your unit is set to pixels and you want to control the after slot.

Reverse model



向分隔符添加内容(Adding content to separator)

¥Adding content to separator

提示

如果你使用图片作为分隔符插槽的内容,则可能需要将 draggable="false" 添加到其中,否则原生浏览器的行为可能会产生负面影响。

¥If you use images as content for the separator slot, you might want to add draggable="false" to them, otherwise the native browser behavior might interfere in a negative way.

Adding to separator



暗黑设计(Dark design)

¥Dark design

On a dark background with customized separator



嵌入式(Embedded)

¥Embedded

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

¥A QSplitter can be embedded in another QSplitter’s before and/or after slots, like shown in example below.

Embedded



趣味示例(Fun examples)

¥Fun examples

Image Fun



Reactive Images