我的文件庫

多根目錄側邊欄

flex-layout

  • Getting Started

  • Guides

  • Reference

typed-rx-http

  • Getting Started

  • Guides

  • Reference

global-rx-state

  • Getting Started

  • Guides

  • Reference

webflux-fe-dev-assistant

reactive-mongo-dsl

分割螢幕

在分割螢幕中配置拖放分割、中心標籤對齊、標題/指引/更多 UI 自訂。


基本SplitScreen

FlexLayoutSplitScreen以中央元件為基準管理 before/center/after 區域的存儲。當 DragBox 被放置在此螢幕上時,根據位置生成行或列的分割,進入同一中心的螢幕則像標籤一樣管理。

tsx
navigationTitle 和標題渲染

navigationTitle是螢幕的標籤數據, navigationTitleComponent是分割螢幕在渲染每個標籤為實際標題 UI 時使用的通用包裝器。DragBox 僅傳遞 navigationTitle 字串,並不攜帶 navigationTitleComponent。

tsx
分割指引和更多 UI 自訂

titleWrapperComponent

包裹 navigationTitleComponent 和 titleCloseButtonComponent 的通用包裝器。省略時不會創建單獨的 DOM 包裝器。

titleCloseButtonComponent

替換 center 標籤的關閉 UI。如果為 undefined,則使用預設的 X 按鈕;如果為 null,則隱藏關閉按鈕。

dropGuideComponent

替換拖放到可分割區域時顯示的基本指引 UI。若省略則使用基本指引文字。

titleMoreButtonComponent

僅替換標題右側的 ... 觸發器。若為 undefined 則使用基本按鈕,若為 null 則隱藏更多。

renderTitleMoreMenuItems

在保留基本更多菜單的同時,將用戶菜單項目添加到下方。

renderTitleMoreMenu

完全替換基本菜單內容。Portal、位置計算、外部點擊、Escape 關閉的庫將持續處理。

tsx
基本更多菜單和擴展上下文

基本更多菜單提供當前標籤關閉、關閉所有其他標籤、關閉所有右側標籤、關閉當前分割的所有標籤,以及在有 openUrl 時在新窗口中打開的選項。

identity

rootName, layoutName, containerName, screenKey

active tab

activeItem, activeIndex

tabs

items

actions

closeMenu(), closeCurrentTab(), closeOtherTabs(), closeTabsToRight(), closeAllTabs(), openInNewWindow()

availability

canCloseOtherTabs, canCloseTabsToRight, canOpenInNewWindow

菜單將作為 React Portal 渲染到 document.body。根據觸發器和菜單的實際大小放置在視口內,並在滾動/調整大小時重新計算位置,因此不會在分割螢幕內部溢出。

中心標籤標題順序變更

可以通過拖動同一分割螢幕的中心標籤標題來改變順序。將目標標題放在左半部則移至前面,放在右半部則移至後面,並根據 screenKey 保持活躍標籤。

使用 Escape 取消拖動

在拖動 DragBox 時按下 Escape 將清理當前的拖動克隆和待處理的拖動狀態,並傳播 isDragging false / isDrop false 狀態。分割指引 UI 將立即消失,之後的滑鼠/觸控結束也不會執行放置。

在 Next.js 中通過 URL 進行畫面拖放
tsx
狀態生命週期選項

preserveStateOnUnmount

true면 FlexLayoutSplitScreen이 언마운트되어도 현재 JavaScript runtime의 in-memory split store를 유지합니다. 브라우저 새로고침 persistence와는 별개이며 기본값은 false입니다.

screenKey

split screen 내 화면을 식별하는 key입니다. 생략하면 내부에서 생성됩니다.

重新整理和瀏覽器 URL 恢復
tsx
© 2026 Byeolnaerim. 版權所有。介紹隱私政策