กล่องลาก
สร้างองค์ประกอบเริ่มต้นที่สามารถลากไปยัง SplitScreen และใช้เป็นแหล่ง Drag & Drop ที่บริสุทธิ์หากจำเป็น
การใช้งานพื้นฐาน
FlexLayoutSplitScreenDragBoxchildren ของจะเป็น UI ที่ผู้ใช้จับอยู่, targetComponentและจะเป็นหน้าจอจริงที่จะเข้าสู่ split screen หลังจากการวาง
navigationTitle จะส่งผ่านเฉพาะข้อมูลป้ายเท่านั้น
navigationTitle ของ DragBox คือข้อมูลป้ายของหน้าจอที่ถูกวาง DragBox จะไม่เก็บเรนเดอร์ชื่อเรื่องเช่น navigationTitleComponent และการออกแบบชื่อจริงจะถูกกำหนดโดย navigationTitleComponent ของ FlexLayoutSplitScreen ที่เป็นเป้าหมายการวาง
ยกเลิกการลากด้วย Escape
เมื่อกด Escape ขณะลากจะยกเลิกการลากปัจจุบัน ล้าง clone และสถานะการลากที่รอดอยู่ และส่งต่อ isDragging false / isDrop false ดังนั้นคำแนะนำการแบ่งของ Split Screen จะหายไปทันทีและ dropEndCallback หรือการแบ่งหน้าจอจะไม่ถูกดำเนินการ
การเรนเดอร์ URL ใน Next.js
เมื่อ import จากจุดเริ่มต้นเฉพาะของ Next.js สามารถส่ง URL แทน targetComponent ได้ โดย iframe จะเป็น false โดยเริ่มต้น และเมื่อเป็น false จะเรนเดอร์จากเซิร์ฟเวอร์ผ่าน registry และ 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를 대상으로 삼을 때 사용합니다.