我的文件庫

多根目錄側邊欄

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

拖曳框

創建可以放置到 SplitScreen 的拖動開始元素,必要時也可作為純拖放來源使用。


基本使用

FlexLayoutSplitScreenDragBox的 children 是用戶抓取的 UI,而 targetComponent是放置後進入分割螢幕的實際畫面。

tsx
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 進行伺服器渲染。

tsx
tsx
文檔外部拖放

dropDocumentOutsideOption如果提供,則可以配置在文檔外拖放時打開新窗口/標籤的操作。

tsx
常用的屬性

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를 대상으로 삼을 때 사용합니다.

© 2026 Byeolnaerim. 版權所有。介紹隱私政策