ドラッグボックス
SplitScreenにドロップできるドラッグ開始要素を作成し、必要に応じて純粋なDrag & Dropソースとしても使用します。
基本使用
FlexLayoutSplitScreenDragBoxのchildrenはユーザーが持つUIで、 targetComponentはドロップ後にスプリットスクリーンに入る実際の画面です。
navigationTitleはラベルデータのみを伝えます。
DragBoxのnavigationTitleはドロップされた画面のラベルデータです。DragBoxはnavigationTitleComponentのようなタイトルレンダラーを保持せず、実際のタイトルデザインはドロップ対象のFlexLayoutSplitScreenのnavigationTitleComponentが決定します。
Escapeでドラッグをキャンセル
ドラッグ中にEscapeを押すと、現在のドラッグをキャンセルします。クローンと保留中のドラッグ状態を整理し、isDragging false / isDrop falseを伝播するため、Split Screenの分割ガイドも即座に消え、dropEndCallbackや画面分割が実行されません。
Next.js URLレンダリング
Next.js専用エントリポイントからインポートすると、targetComponentの代わりにurlのみを渡すことができます。iframeはデフォルトでfalseで、falseの場合は生成されたレジストリと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를 대상으로 삼을 때 사용합니다.