Kéo hộp
Tạo các yếu tố bắt đầu kéo có thể thả vào SplitScreen, và nếu cần, cũng có thể sử dụng như nguồn kéo & thả thuần túy.
Sử dụng cơ bản
FlexLayoutSplitScreenDragBoxcác children là UI mà người dùng nắm giữ, targetComponentlà màn hình thực tế sẽ vào split screen sau khi thả.
Tiêu đề điều hướng chỉ truyền dữ liệu nhãn.
Tiêu đề điều hướng của DragBox là dữ liệu nhãn của màn hình đã thả. DragBox không giữ lại trình hiển thị tiêu đề như navigationTitleComponent, và thiết kế tiêu đề thực tế sẽ được quyết định bởi navigationTitleComponent của FlexLayoutSplitScreen mà nó được thả vào.
Hủy kéo bằng Escape.
Khi nhấn Escape trong khi kéo, nó sẽ hủy bỏ kéo hiện tại. Dọn dẹp clone và trạng thái kéo đang chờ và truyền đạt isDragging false / isDrop false, do đó hướng dẫn phân chia của Split Screen cũng sẽ ngay lập tức biến mất và không có dropEndCallback hay phân chia màn hình nào được thực hiện.
Render URL trong Next.js
Khi import từ điểm vào riêng cho Next.js, chỉ cần truyền url thay vì targetComponent. iframe mặc định là false, và khi false, sẽ render trên server thông qua registry và Provider đã tạo.
Thả ra ngoài tài liệu
dropDocumentOutsideOptionNếu bạn cung cấp, có thể cấu hình hành động mở cửa sổ/tab mới khi thả ra ngoài tài liệu.
Các props thường dùng
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를 대상으로 삼을 때 사용합니다.