拖动框
创建可以在SplitScreen中放置的拖动开始元素,并在需要时作为纯Drag & Drop源使用.
基本用法
FlexLayoutSplitScreenDragBox的 children 是用户抓取的 UI, targetComponent是 drop 后进入 split screen 的实际屏幕。
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可以配置在文档外拖放时打开新窗口/标签的操作。
常用的 props
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를 대상으로 삼을 때 사용합니다.