分栏

QSplitter 组件可以将容器通过一个可拖动的分割栏垂直或水平分开。

QSplitter API

Loading QSplitter API...

用法

WARNING

必须要使用 beforeafter 插槽。

点击并拖拽分隔栏以查看效果。

基础




水平




自定义拖拽限制




数据单位

默认的 CSS 单位是 ‘%’ (百分比),但是您可以将其设置为 ‘px’(像素),如下所示。




反向的 model 数据

默认情况下,model 数据表示 before 插槽的大小,但是您可以将其反转成 after 插槽的大小,如下所示。当您使用像素单位并且想控制 after 插槽的大小时很有用。




给分割条添加内容

TIP

如果您添加的内容中有用图像,那么最好为其添加 draggable="false" 否则浏览器的原生行为可能会产生负面影响。




黑色模式




嵌套的

一个 QSplitter 也可以嵌套在另一个 QSplitter 的 before /after 插槽中,如下所示:




有趣的示例