QSplitter 组件允许用户通过拖动分隔条来调整两个相邻面板的大小。

QSplitter API

用法

点击并拖动分隔栏以查看结果。

基础

水平

自定义拖动限制

模型单位

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

反向模型

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

向分隔栏添加内容

暗色设计

嵌套

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

有趣的示例

Accessibility

v2.25+

The separator bar implements the WAI-ARIA window splitter pattern: it carries role="separator" with an aria-orientation matching the splitter’s direction, aria-controls pointing at the panel the model resizes, and aria-valuemin/aria-valuemax/aria-valuenow tracking the split as it moves. A disabled QSplitter exposes aria-disabled on the separator and removes it from the Tab order.

Its accessible name defaults to the label.resize entry of the Quasar Language Pack, since a separator’s children are presentational in ARIA — whatever you put in the separator slot can never name it. Use the separator-aria-label prop (v2.25+) to replace that generic name with one that says which panels are being resized, which is what you want as soon as a page holds more than one splitter.

Keyboard navigation

QSplitter follows the WAI-ARIA window splitter pattern: the separator bar is a Tab stop exposed to assistive technology as a separator with the model as its value. While it has focus, the arrow keys matching the splitter’s orientation (left/right, or up/down when in horizontal mode) move it by 1% (or 10px when unit is set to pixels), while Home/End jump to the model’s limits. Arrow keys account for the reverse prop and RTL language packs, so a given key always moves the separator in the direction it points to. Pressing Enter collapses the model-controlled panel to its minimum limit, and pressing it again restores the previous position.