分割螢幕
在分割螢幕中配置拖放分割、中心標籤對齊、標題/指引/更多 UI 自訂。
基本SplitScreen
FlexLayoutSplitScreen以中央元件為基準管理 before/center/after 區域的存儲。當 DragBox 被放置在此螢幕上時,根據位置生成行或列的分割,進入同一中心的螢幕則像標籤一樣管理。
navigationTitle 和標題渲染
navigationTitle是螢幕的標籤數據, navigationTitleComponent是分割螢幕在渲染每個標籤為實際標題 UI 時使用的通用包裝器。DragBox 僅傳遞 navigationTitle 字串,並不攜帶 navigationTitleComponent。
分割指引和更多 UI 自訂
titleWrapperComponent
包裹 navigationTitleComponent 和 titleCloseButtonComponent 的通用包裝器。省略時不會創建單獨的 DOM 包裝器。
titleCloseButtonComponent
替換 center 標籤的關閉 UI。如果為 undefined,則使用預設的 X 按鈕;如果為 null,則隱藏關閉按鈕。
dropGuideComponent
替換拖放到可分割區域時顯示的基本指引 UI。若省略則使用基本指引文字。
titleMoreButtonComponent
僅替換標題右側的 ... 觸發器。若為 undefined 則使用基本按鈕,若為 null 則隱藏更多。
renderTitleMoreMenuItems
在保留基本更多菜單的同時,將用戶菜單項目添加到下方。
renderTitleMoreMenu
完全替換基本菜單內容。Portal、位置計算、外部點擊、Escape 關閉的庫將持續處理。
中心標籤標題順序變更
可以通過拖動同一分割螢幕的中心標籤標題來改變順序。將目標標題放在左半部則移至前面,放在右半部則移至後面,並根據 screenKey 保持活躍標籤。
使用 Escape 取消拖動
在拖動 DragBox 時按下 Escape 將清理當前的拖動克隆和待處理的拖動狀態,並傳播 isDragging false / isDrop false 狀態。分割指引 UI 將立即消失,之後的滑鼠/觸控結束也不會執行放置。
在 Next.js 中通過 URL 進行畫面拖放
狀態生命週期選項
preserveStateOnUnmount
true면 FlexLayoutSplitScreen이 언마운트되어도 현재 JavaScript runtime의 in-memory split store를 유지합니다. 브라우저 새로고침 persistence와는 별개이며 기본값은 false입니다.
screenKey
split screen 내 화면을 식별하는 key입니다. 생략하면 내부에서 생성됩니다.