مكتبتي

شريط جانبي متعدد الجذور

flex-layout

  • Getting Started

  • Guides

  • Reference

typed-rx-http

  • Getting Started

  • Guides

  • Reference

global-rx-state

  • Getting Started

  • Guides

  • Reference

webflux-fe-dev-assistant

reactive-mongo-dsl

سحب صندوق

إنشاء عنصر بدء سحب يمكن إسقاطه في SplitScreen، واستخدامه كمصدر سحب وإفلات نقي إذا لزم الأمر.


الاستخدام الأساسي

FlexLayoutSplitScreenDragBoxالأطفال في targetComponentهي واجهة المستخدم التي يمسكها المستخدم، و

tsx
يتم تمرير عنوان التنقل فقط كبيانات تسمية.

عنوان التنقل في DragBox هو بيانات تسمية الشاشة التي تم إسقاطها. لا يحتفظ DragBox بمحرر عنوان مثل مكون عنوان التنقل، ويحدد تصميم العنوان الفعلي مكون عنوان التنقل في FlexLayoutSplitScreen المستهدف.

إلغاء السحب باستخدام Escape

عند الضغط على Escape أثناء السحب، يتم إلغاء السحب الحالي. يتم تنظيف النسخة وحالة السحب المعلقة ويتم تمرير isDragging false / isDrop false، لذا تختفي إرشادات التقسيم في Split Screen على الفور، ولن يتم تنفيذ dropEndCallback أو تقسيم الشاشة.

تقديم URL في Next.js

عند الاستيراد من نقطة دخول مخصصة لـ Next.js، يمكنك تمرير URL فقط بدلاً من targetComponent. iframe هو false بشكل افتراضي، وعندما يكون false، يتم تقديمه عبر registry وProvider الذي تم إنشاؤه.

tsx
tsx
إسقاط خارج المستند

dropDocumentOutsideOptionيمكنك تكوين إجراء لفتح نافذة / علامة تبويب جديدة عند إسقاطه خارج المستند.

tsx
الخصائص المستخدمة بشكل متكرر

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를 대상으로 삼을 때 사용합니다.

© 2026 بيولناريم. جميع الحقوق محفوظة.مقدمةسياسة معالجة المعلومات الشخصية