Caja de Arrastre
Crea un elemento de inicio de arrastre que se puede soltar en SplitScreen, y si es necesario, también se usa como fuente de arrastre y soltado puro.
Uso básico
FlexLayoutSplitScreenDragBoxlos children son la UI que el usuario sostiene, y targetComponentes la pantalla real que irá a la pantalla dividida después de soltar.
navigationTitle solo pasa datos de etiqueta.
El navigationTitle del DragBox es el dato de etiqueta de la pantalla soltada. DragBox no mantiene un renderizador de título como navigationTitleComponent, y el diseño real del título es determinado por el navigationTitleComponent de FlexLayoutSplitScreen de destino.
Cancelar arrastre con Escape.
Si se presiona Escape mientras se arrastra, se cancela el arrastre actual. Se limpia el clone y el estado de arrastre pendiente y se propaga isDragging false / isDrop false, por lo que la guía de división de la pantalla dividida también desaparece de inmediato y no se ejecuta dropEndCallback ni la división de pantalla.
Renderización de URL en Next.js
Al importar desde el punto de entrada exclusivo de Next.js, se puede pasar solo la URL en lugar de targetComponent. iframe es false por defecto, y cuando es false, se renderiza en el servidor a través del registro y Provider generados.
drop fuera del documento
dropDocumentOutsideOptionAl proporcionar, puede configurar una acción que abra una nueva ventana/pestaña al soltar fuera del documento.
Props de uso frecuente
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를 대상으로 삼을 때 사용합니다.