拖曳框
創建可以放置到 SplitScreen 的拖動開始元素,必要時也可作為純拖放來源使用。
基本使用
FlexLayoutSplitScreenDragBox的 children 是用戶抓取的 UI,而 targetComponent是放置後進入分割螢幕的實際畫面。
navigationTitle 僅傳遞標籤數據。
DragBox 的 navigationTitle 是放置的螢幕的標籤數據。DragBox 不保留像 navigationTitleComponent 這樣的標題渲染器,實際的標題設計由放置目標 FlexLayoutSplitScreen 的 navigationTitleComponent 決定。
使用 Escape 取消拖動
在拖動過程中按下 Escape 將取消當前拖動。清理克隆和待處理的拖動狀態並傳播 isDragging false / isDrop false,因此分割螢幕的分割指引也會立即消失,並且不會執行 dropEndCallback 或螢幕分割。
Next.js URL 渲染
在 Next.js 專用入口中導入時,可以僅傳遞 url 而不是 targetComponent。iframe 默認為 false,當為 false 時,通過生成的 registry 和 Provider 進行伺服器渲染。
文檔外部拖放
dropDocumentOutsideOption如果提供,則可以配置在文檔外拖放時打開新窗口/標籤的操作。
常用的屬性
navigationTitle
drop 후 화면에 붙는 라벨 데이터입니다. 타이틀 UI 스타일은 수신하는 FlexLayoutSplitScreen이 담당합니다.
dropEndCallback
drop이 끝난 뒤 x, y, containerName을 받아 후처리합니다.
isBlockingActiveInput
input/textarea/select/contenteditable 등 active 입력 요소에서 drag 시작을 막을지 제어합니다. 기본값은 false입니다.
customData
드래그 중 함께 전달할 string/number/boolean 기반의 커스텀 데이터입니다.
scrollTargetRef
드래그 중 viewport edge auto-scroll 대신 특정 scroll container를 대상으로 삼을 때 사용합니다.