分割螢幕
在分割螢幕中配置拖放分割、中心標籤對齊、標題/指引/更多 UI 自訂。
基本SplitScreen
FlexLayoutSplitScreen以中央元件為基準管理 before/center/after 區域的存儲。當 DragBox 被放置在此螢幕上時，根據位置生成行或列的分割，進入同一中心的螢幕則像標籤一樣管理。
<FlexLayoutSplitScreen
layoutName="editor-split"
containerName="editor-home"
navigationTitle="Home"
>
<HomeView />
</FlexLayoutSplitScreen>navigationTitle 和標題渲染
navigationTitle是螢幕的標籤數據， navigationTitleComponent是分割螢幕在渲染每個標籤為實際標題 UI 時使用的通用包裝器。DragBox 僅傳遞 navigationTitle 字串，並不攜帶 navigationTitleComponent。
function SplitScreenTitle({ children }: { children?: React.ReactNode }) {
return <strong className="split-title">{children}</strong>;
}
<FlexLayoutSplitScreen
layoutName="editor-split"
containerName="editor-home"
navigationTitle="Home"
navigationTitleComponent={<SplitScreenTitle />}
>
<HomeView />
</FlexLayoutSplitScreen>分割指引和更多 UI 自訂
titleWrapperComponent
包裹 navigationTitleComponent 和 titleCloseButtonComponent 的通用包裝器。省略時不會創建單獨的 DOM 包裝器。
titleCloseButtonComponent
替換 center 標籤的關閉 UI。如果為 undefined，則使用預設的 X 按鈕；如果為 null，則隱藏關閉按鈕。
dropGuideComponent
替換拖放到可分割區域時顯示的基本指引 UI。若省略則使用基本指引文字。
titleMoreButtonComponent
僅替換標題右側的 ... 觸發器。若為 undefined 則使用基本按鈕，若為 null 則隱藏更多。
renderTitleMoreMenuItems
在保留基本更多菜單的同時，將用戶菜單項目添加到下方。
renderTitleMoreMenu
完全替換基本菜單內容。Portal、位置計算、外部點擊、Escape 關閉的庫將持續處理。
<FlexLayoutSplitScreen
layoutName="editor-split"
containerName="editor-home"
navigationTitle="Home"
titleWrapperComponent={<div className="split-tab" />}
titleCloseButtonComponent={<button type="button">Close</button>}
dropGuideComponent={<div>Drop here</div>}
titleMoreButtonComponent={<button type="button">Menu</button>}
renderTitleMoreMenuItems={(context) => (
<button
type="button"
onClick={() => {
console.log(context.activeItem);
context.closeMenu();
}}
>
Custom action
</button>
)}
>
<HomeView />
</FlexLayoutSplitScreen>中心標籤標題順序變更
可以通過拖動同一分割螢幕的中心標籤標題來改變順序。將目標標題放在左半部則移至前面，放在右半部則移至後面，並根據 screenKey 保持活躍標籤。
使用 Escape 取消拖動
在拖動 DragBox 時按下 Escape 將清理當前的拖動克隆和待處理的拖動狀態，並傳播 isDragging false / isDrop false 狀態。分割指引 UI 將立即消失，之後的滑鼠/觸控結束也不會執行放置。
在 Next.js 中通過 URL 進行畫面拖放
import { FlexLayoutSplitScreenDragBox } from "@byeolnaerim/flex-layout/next";
<FlexLayoutSplitScreenDragBox
url="/orders/1"
containerName="order-1"
navigationTitle="Order #1"
>
<button type="button">Order #1</button>
</FlexLayoutSplitScreenDragBox>狀態生命週期選項
preserveStateOnUnmount
true면 FlexLayoutSplitScreen이 언마운트되어도 현재 JavaScript runtime의 in-memory split store를 유지합니다. 브라우저 새로고침 persistence와는 별개이며 기본값은 false입니다.
screenKey
split screen 내 화면을 식별하는 key입니다. 생략하면 내부에서 생성됩니다.
重新整理和瀏覽器 URL 恢復
<FlexLayoutNextSplitScreen
persistence={{
storage: "auto",
restoreOnReload: true,
syncWithBrowserUrl: true,
}}
>
<FlexLayoutSplitScreen
layoutName="editor-split"
containerName="editor-home"
navigationTitle="Home"
>
<HomeView />
</FlexLayoutSplitScreen>
</FlexLayoutNextSplitScreen>