QSplitter | Quasar 框架

如何贡献

选项和助手

样式和标识

布局和网格

Vue 指令

Quasar 插件

Vue 组合式 API

安全

Quasar CLI（使用 Vite）

Quasar CLI (使用 Webpack)

Icon Genie CLI

应用扩展

Quasar 工具

QSplitter

QSplitter 组件允许容器通过可拖动的分隔线垂直和/或水平分割。

用法

警告

需要使用 before 和 after 插槽。

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

默认情况下，使用的 CSS unit 为 ‘%’（百分比）。但您也可以使用 ‘px’（像素），如下例所示。

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

提示

如果使用图像作为分隔线插槽的内容，您可能希望向其添加 draggable="false"，否则本机浏览器行为可能会以负面方式干扰。

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

1. 简介

2. QSplitter API

3. 用法

3.1. 基本

3.2. 水平

3.3. 自定义拖动限制

3.4. 模型单位

3.5. 反转模型

3.6. 在分隔线中添加内容

3.7. 深色设计

3.8. 嵌入

3.9. 有趣示例