QSplitter 组件允许通过可拖动的分隔条垂直和/或水平分割容器。
¥The QSplitter component allow containers to be split vertically and/or horizontally through a draggable separator bar.
用法(Usage)
¥Usage
警告
必须使用 before
和 after
插槽。
¥The use of the before
and after
slots is required.
点击并拖动分隔条即可查看结果。
¥Click and drag on the splitter separator bar to see results.
基本(Basic)
¥Basic
水平(Horizontal)
¥Horizontal
自定义拖动限制(Custom dragging limits)
¥Custom dragging limits
模型单位(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.
反向模型(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.
向分隔符添加内容(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.
暗黑设计(Dark design)
¥Dark design
嵌入式(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.
趣味示例(Fun examples)
¥Fun examples