分割画面
ドラッグ＆ドロップ分割、センタータブの整列、タイトル/ガイド/More UIのカスタマイズを行ったSplit Screenで構成します。
基本SplitScreen
FlexLayoutSplitScreenは中央コンポーネントを基準にbefore/center/after領域をストアで管理します。DragBoxがこの画面上にドロップされると、位置に応じて行または列の分割が生成され、同じcenterに入った画面はタブのように管理されます。
navigationTitleとタイトルレンダリング
navigationTitleは画面のラベルデータであり、 navigationTitleComponentはSplit Screenが各ラベルを実際のタイトルUIとしてレンダリングする際に使用する共通ラッパーです。DragBoxはnavigationTitle文字列のみを渡し、navigationTitleComponentを持って移動しません。
分割ガイドとMore UIのカスタマイズ
titleWrapperComponent
navigationTitleComponentとtitleCloseButtonComponentを一緒に包む共通ラッパーです。省略すると別のDOMラッパーは作成されません。
titleCloseButtonComponent
centerタブの閉じるUIを置き換えます。undefinedの場合はデフォルトのXボタンを使用し、nullの場合は閉じるボタンを隠します。
dropGuideComponent
分割可能な領域にドラッグしたときに表示される基本ガイドUIを置き換えます。省略すると基本ガイド文言が使用されます。
titleMoreButtonComponent
タイトル右の...トリガーのみを置き換えます。undefinedの場合は基本ボタンを使用し、nullの場合はMoreを隠します。
renderTitleMoreMenuItems
基本Moreメニューを保持しつつ、ユーザーメニュー項目を下に追加します。
renderTitleMoreMenu
基本メニュー内容をすべて置き換えます。Portal、位置計算、外クリック、Escape閉じるはライブラリが引き続き処理します。
centerタブタイトルの順序変更
同じSplit Screenのcenterタブタイトルをドラッグして順序を変更できます。対象タイトルの左半分に置くと前に、右半分に置くと後ろに移動し、アクティブタブはscreenKeyに基づいて保持されます。
Escapeでドラッグをキャンセル
DragBoxをドラッグ中にEscapeを押すと、現在のドラッグクローンと保留中のドラッグ状態を整理し、isDragging false / isDrop falseの状態を伝播します。分割ガイドUIは即座に消え、その後のmouse/touch終了でもドロップは実行されません。
Next.jsでURLを使って画面をドロップ
状態ライフサイクルオプション
preserveStateOnUnmount
true면 FlexLayoutSplitScreen이 언마운트되어도 현재 JavaScript runtime의 in-memory split store를 유지합니다. 브라우저 새로고침 persistence와는 별개이며 기본값은 false입니다.
screenKey
split screen 내 화면을 식별하는 key입니다. 생략하면 내부에서 생성됩니다.