彈性分割工作區 Elastic Split Workspace｜React 元件

多欄可拖曳分割的面板工作區，分隔線帶彈簧回饋，面板可一鍵收合成細條並讓鄰近面板彈性重排。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add "https://webberui.com/r/elastic-split-workspace.json?t=<安裝 token>"

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

分割方向direction

側邊面板可收合collapsible

最小尺寸（%）minSize

收合細條尺寸（px）collapsedSize

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<ElasticSplitWorkspace/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add "https://webberui.com/r/elastic-split-workspace.json?t=<安裝 token>"

或在 components.json 設定 registries 後，改用 @webberui/elastic-split-workspace 安裝。

使用

以 SplitPanel 宣告每一欄，工作區會自動在相鄰面板之間插入可拖曳分隔線：

import {
  ElasticSplitWorkspace,
  SplitPanel,
} from "@/components/ui/elastic-split-workspace";

<ElasticSplitWorkspace className="h-[320px]">
  <SplitPanel id="nav" title="導覽" defaultSize={22} minSize={14} collapsible>
    {/* 側欄內容 */}
  </SplitPanel>
  <SplitPanel id="main" title="主內容" defaultSize={56}>
    {/* 主內容 */}
  </SplitPanel>
  <SplitPanel id="aside" title="屬性" defaultSize={22} collapsible>
    {/* 檢視器內容 */}
  </SplitPanel>
</ElasticSplitWorkspace>;

拖曳分隔線調整相鄰面板比例；拖到最小值以外會有橡皮筋阻力，放開後彈簧回彈。
具 collapsible 的面板，其標題列會出現收合鈕；收合後變成可點擊展開的細條，鄰近面板以寬度彈性動畫即時重排。
傳 direction="vertical" 可改為多列（上下）分割。

Props

`ElasticSplitWorkspace`

Prop	型別	預設值	說明
`children`	`ReactNode`	—	面板集合，子項須為 `SplitPanel` 元素
`direction`	`"horizontal" \| "vertical"`	`"horizontal"`	分割方向：水平多欄或垂直多列
`onPanelCollapse`	`(id: string, collapsed: boolean) => void`	—	面板收合／展開時觸發
`aria-label`	`string`	`"分割工作區"`	工作區的無障礙標籤
`className`	`string`	—	追加到外框的 className

`SplitPanel`

Prop	型別	預設值	說明
`id`	`string`	—	面板唯一識別碼
`defaultSize`	`number`	`1`	初始比例（相對權重，各面板按比例分配剩餘空間）
`minSize`	`number`	`10`	最小尺寸（佔工作區的百分比 0–100）
`collapsible`	`boolean`	`false`	是否可一鍵收合成細條
`collapsedSize`	`number`	`48`	收合後細條的像素寬（水平）或高（垂直）
`defaultCollapsed`	`boolean`	`false`	初始是否收合
`title`	`ReactNode`	—	標題，顯示於面板頁首與收合細條
`icon`	`ReactNode`	—	標題旁的小圖示
`className`	`string`	—	追加到面板容器的 className

細節

彈簧物理：拖曳分隔線時面板寬度即時跟手；超出面板 minSize 邊界會套用橡皮筋阻尼，放開後以彈簧回彈到合法邊界。
彈性重排：面板 flex-grow 與 flex-basis 以彈簧過渡；某面板收合成細條時，鄰近展開面板會連續補上釋出的空間，形成即時重排。
比例保留：面板收合後再展開，會回到收合前的比例，不會重置。
量測：拖曳時直接量測相鄰兩面板的實際像素尺寸換算權重，只調整這一對面板，其餘面板不受影響。

可及性

每條分隔線為 role="separator"，帶 aria-orientation 與 aria-valuenow / valuemin / valuemax，可用 Tab 聚焦。
聚焦分隔線後，水平方向以 ← →、垂直方向以 ↑ ↓ 逐步調整大小。
收合／展開鈕為原生 <button>，帶 aria-label，支援鍵盤操作。
收合細條兩側面板為可點擊按鈕，整條皆可觸發展開。
使用者開啟「減少動態效果」時，彈簧過渡改為即時切換，功能與結構完全不變。

Elastic Split Workspace

把這個效果裝進你的專案

本頁目錄