Ziehen Sie das Feld
Erstellen Sie ein Drag-Start-Element, das in den SplitScreen fallen gelassen werden kann, und verwenden Sie es bei Bedarf auch als reinen Drag & Drop-Source.
Grundlegende Verwendung
FlexLayoutSplitScreenDragBoxs Kinder sind die UI, die der Benutzer greift, und targetComponentist der tatsächliche Bildschirm, der nach dem Drop in den Split-Screen gelangt.
navigationTitle überträgt nur die Label-Daten.
Der navigationTitle der DragBox sind die Label-Daten des fallengelassenen Bildschirms. DragBox speichert keinen Titel-Renderer wie navigationTitleComponent, und das tatsächliche Titel-Design wird von der navigationTitleComponent des Ziel-FlexLayoutSplitScreen bestimmt.
Abbrechen des Drag mit Escape
Wenn Sie während des Drag die Escape-Taste drücken, wird der aktuelle Drag abgebrochen. Klon und ausstehender Drag-Zustand werden bereinigt und isDragging false / isDrop false wird propagiert, sodass die Teilungsanleitung des Split Screens sofort verschwindet und dropEndCallback oder Bildschirmteilung nicht ausgeführt wird.
Next.js URL-Rendering
Wenn Sie von einem Next.js-spezifischen Einstiegspunkt importieren, können Sie nur die URL anstelle von targetComponent übergeben. iframe ist standardmäßig false, und wenn es false ist, wird das erstellte Registry und der Provider für das serverseitige Rendering verwendet.
Drop außerhalb des Dokuments
dropDocumentOutsideOptionWenn Sie dies angeben, können Sie eine Aktion konfigurieren, die ein neues Fenster/Tab öffnet, wenn es außerhalb des Dokuments fallen gelassen wird.
Häufig verwendete 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를 대상으로 삼을 때 사용합니다.