QSplitter 组件允许用户通过拖动分隔条来调整两个相邻面板的大小。
QSplitter API
用法
必须使用 before 和 after 插槽。
点击并拖动分隔栏以查看结果。
基础
水平
自定义拖动限制
模型单位
默认情况下,使用的 CSS unit 是 ‘%’(百分比)。但您也可以使用 ‘px’(像素),如下例所示。
反向模型
默认情况下,模型连接到 before 插槽大小。但您可以将其反转并使其连接到 after 插槽,如下例所示。如果您的 unit 设置为像素并且想要控制 after 插槽,这个功能特别有用。
向分隔栏添加内容
如果您在分隔栏插槽中使用图像作为内容,您可能需要为它们添加 draggable="false",否则原生浏览器行为可能会产生负面干扰。
暗色设计
嵌套
QSplitter 可以嵌入到另一个 QSplitter 的 before 和/或 after 插槽中,如下例所示。
有趣的示例
无障碍访问 v2.25+
分隔条实现了 WAI-ARIA 窗口分割器模式：它带有 role="separator" 及与分割器方向匹配的 aria-orientation、指向 model 所调整面板的 aria-controls，以及跟踪分割位置的 aria-valuemin/aria-valuemax/aria-valuenow。禁用的 QSplitter 会在分隔条上暴露 aria-disabled 并将其从 Tab 顺序中移除。
其无障碍名称默认取自 Quasar 语言包 的 label.resize 条目，因为分隔条的子元素在 ARIA 中是展示性的——你放在 separator 插槽中的任何内容都无法命名它。使用 separator-aria-label 属性（v2.25+）来替换该通用名称为一个说明正在调整哪些面板的名称，当一个页面包含多个分割器时这正是你需要的。
键盘导航
QSplitter 遵循 WAI-ARIA 窗口分割器模式：分隔条是一个 Tab 焦点，向辅助技术暴露为带有 model 值的 separator。当它获得焦点时，与分割器方向匹配的方向键（左/右，或 horizontal 模式下的上/下）每次移动 1%（当 unit 设为像素时为 10px），Home/End 跳转到 model 的极值。方向键会考虑 reverse 属性和 RTL 语言包，所以给定的按键始终沿其指向的方向移动分隔条。按 Enter 将 model 控制的面板折叠到其最小极值，再次按下则恢复到之前的位置。