拖曳框

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

基本使用

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

tsx

<FlexLayoutSplitScreenDragBox
  containerName="customer-detail"
  navigationTitle="Customer"
  targetComponent={<CustomerDetail />}
>
  <button type="button">Customer Detail</button>
</FlexLayoutSplitScreenDragBox>

navigationTitle 僅傳遞標籤數據。

DragBox 的 navigationTitle 是放置的螢幕的標籤數據。DragBox 不保留像 navigationTitleComponent 這樣的標題渲染器，實際的標題設計由放置目標 FlexLayoutSplitScreen 的 navigationTitleComponent 決定。

螢幕數據和標題設計分離

將相同的 DragBox 放置到不同的分割螢幕時，navigationTitle 值相同，但可以遵循各自分割螢幕的標題包裝器設計。

使用 Escape 取消拖動

在拖動過程中按下 Escape 將取消當前拖動。清理克隆和待處理的拖動狀態並傳播 isDragging false / isDrop false，因此分割螢幕的分割指引也會立即消失，並且不會執行 dropEndCallback 或螢幕分割。

Next.js URL 渲染

在 Next.js 專用入口中導入時，可以僅傳遞 url 而不是 targetComponent。iframe 默認為 false，當為 false 時，通過生成的 registry 和 Provider 進行伺服器渲染。

tsx

import { FlexLayoutSplitScreenDragBox } from "@byeolnaerim/flex-layout/next";

<FlexLayoutSplitScreenDragBox
  url="/orders/1"
  containerName="order-1"
  navigationTitle="Order #1"
>
  <span>Order #1</span>
</FlexLayoutSplitScreenDragBox>

tsx

<FlexLayoutSplitScreenDragBox
  url="https://example.com"
  iframe
  containerName="external"
  navigationTitle="External"
>
  <span>External</span>
</FlexLayoutSplitScreenDragBox>

文檔外部拖放

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

tsx

<FlexLayoutSplitScreenDragBox
  containerName="order"
  navigationTitle="Order"
  targetComponent={<OrderView />}
  dropDocumentOutsideOption={{
    openUrl: "/orders/1",
    widthRatio: 0.7,
    heightRatio: 0.8,
    isNewTap: false,
  }}
>
  <span>Order #1</span>
</FlexLayoutSplitScreenDragBox>

常用的屬性

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