Boîte de glissement
Créez un élément de départ de glissement pouvant être déposé dans SplitScreen, et utilisez-le également comme source de glissement et de dépôt pur si nécessaire.
Utilisation de base
FlexLayoutSplitScreenDragBoxles enfants de sont l'interface utilisateur que l'utilisateur saisit, et targetComponentest l'écran réel qui ira dans le split screen après le drop.
navigationTitle ne transmet que les données d'étiquette.
Le navigationTitle du DragBox est la donnée d'étiquette de l'écran déposé. Le DragBox ne conserve pas de rendu de titre comme navigationTitleComponent, et le design réel du titre est déterminé par le navigationTitleComponent de FlexLayoutSplitScreen cible.
Annuler le glissement avec Échap
Si vous appuyez sur Échap pendant le glissement, cela annule le glissement actuel. Cela nettoie le clone et l'état de glissement en attente et propage isDragging false / isDrop false, donc les instructions de division de l'écran partagé disparaissent immédiatement et aucun dropEndCallback ou division d'écran n'est exécuté.
Rendu d'URL Next.js
En important depuis le point d'entrée spécifique à Next.js, vous pouvez transmettre uniquement l'URL au lieu de targetComponent. L'iframe est par défaut à false, et lorsqu'il est false, le rendu côté serveur se fait via le registre et le Provider créés.
drop en dehors du document
dropDocumentOutsideOptionEn fournissant , vous pouvez configurer une action pour ouvrir une nouvelle fenêtre/onglet lors du drop en dehors du document.
props fréquemment utilisés
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를 대상으로 삼을 때 사용합니다.