QSplitter | Quasar 框架

為何捐款

API 瀏覽器

如何貢獻

選項與輔助

樣式與識別

佈局與網格

Vue 組件

按鈕

表單組件

觀察器

Vue 指令

Quasar 插件

Vue Composables

安全性

Quasar CLI (搭配 Vite)

Quasar CLI (搭配 Webpack)

Icon Genie CLI

App Extensions

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. 有趣的範例