QSplitter

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

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

WARNING

需要使用beforeafter插槽。

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

基础

Basic

水平

Horizontal

自定义拖动限制

Adding to separator

模型单位

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

Model in pixels

反转模型

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

Reverse model

向分隔符添加内容

Adding to separator

暗色设计

Custom dragging limits (50-100)

嵌入式的

On a dark background with customized separator

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

有趣的例子

Embedded
Image Fun
Reactive Images

QSplitter API

Loading API...
Please wait...