شاشة مقسمة

تكوين شاشة مقسمة مع سحب وإفلات، ومحاذاة علامات التبويب في المنتصف، وتخصيص واجهة المستخدم للعناوين/الإرشادات/المزيد.

SplitScreen الافتراضي

FlexLayoutSplitScreenتدير المناطق قبل/الوسط/بعد في المتجر بناءً على المكون المركزي. عند إسقاط DragBox على هذه الشاشة، يتم إنشاء تقسيم صف أو عمود حسب الموقع، وتتم إدارة الشاشة التي تدخل في نفس المركز مثل علامات التبويب.

tsx

عنوان التنقل ورسم العنوان

عنوان التنقلهي بيانات تسمية الشاشة، و مكون عنوان التنقلهو غلاف مشترك يستخدمه Split Screen عند رسم كل تسمية كواجهة مستخدم فعلية. يقوم DragBox بنقل سلسلة عنوان التنقل فقط ولا يحمل مكون عنوان التنقل.

يستخدم تصميم Split Screen الذي تم الوصول إليه.

عند نقل الشاشة إلى Split Screen آخر، تبقى بيانات تسمية العنوان، لكن تصميم الرسم يتبع مكون عنوان التنقل في Split Screen الذي تم الوصول إليه.

tsx

إرشادات التقسيم وتخصيص واجهة المستخدم للمزيد

titleWrapperComponent

غلاف مشترك يحيط بـ navigationTitleComponent و titleCloseButtonComponent. إذا تم إغفاله، فلن يتم إنشاء غلاف DOM منفصل.

titleCloseButtonComponent

يستبدل واجهة المستخدم لإغلاق علامة التبويب في المركز. إذا كانت undefined، يتم استخدام زر X الافتراضي، وإذا كانت null، يتم إخفاء زر الإغلاق.

dropGuideComponent

استبدال واجهة المستخدم الافتراضية للإرشادات التي تظهر عند السحب إلى منطقة قابلة للتقسيم. إذا تم تجاهلها، يتم استخدام النص الافتراضي.

titleMoreButtonComponent

استبدال الزر فقط على اليمين من العنوان ... إذا كان غير معرف، يتم استخدام الزر الافتراضي، وإذا كان فارغًا، يتم إخفاء المزيد.

renderTitleMoreMenuItems

إضافة عناصر قائمة المستخدم أسفل القائمة الافتراضية للمزيد.

renderTitleMoreMenu

استبدال محتوى القائمة الافتراضية بالكامل. تواصل المكتبة معالجة حساب الموقع، والنقر الخارجي، وإغلاق Escape.

tsx

القائمة الافتراضية للمزيد وسياق التمديد

تقدم القائمة الافتراضية للمزيد إغلاق علامة التبويب الحالية، وإغلاق جميع علامات التبويب الأخرى، وإغلاق جميع علامات التبويب اليمنى، وإغلاق جميع علامات التبويب في التقسيم الحالي، وفتح في نافذة جديدة عند وجود openUrl.

identity

rootName, layoutName, containerName, screenKey

active tab

activeItem, activeIndex

tabs

items

actions

closeMenu(), closeCurrentTab(), closeOtherTabs(), closeTabsToRight(), closeAllTabs(), openInNewWindow()

availability

canCloseOtherTabs, canCloseTabsToRight, canOpenInNewWindow

يتم رسم القائمة كـ React Portal في document.body. يتم وضعها داخل viewport بناءً على الحجم الفعلي للزر والقائمة، ويتم إعادة حساب الموقع عند التمرير/تغيير الحجم، لذا لا يتم قطعها داخل overflow في Split Screen.

تغيير ترتيب عناوين علامات التبويب في المنتصف

يمكن سحب عناوين علامات التبويب في المنتصف لنفس Split Screen لتغيير ترتيبها. إذا تم وضعها في النصف الأيسر من العنوان المستهدف، تنتقل للأمام، وإذا تم وضعها في النصف الأيمن، تنتقل للخلف، وتظل علامة التبويب النشطة بناءً على screenKey.

إعادة ترتيب العنوان وتقسيم الشاشة يتم في مناطق إسقاط منفصلة.

في منطقة العنوان، يتم معالجة ترتيب علامات التبويب فقط، لذا لا تظهر إرشادات التقسيم. إذا تم سحب العنوان إلى منطقة Split Screen الفعلية، يمكن استخدام سلوك السحب الحالي لتقسيم الشاشة.

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

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

إسقاط الشاشة عبر URL في Next.js

نقطة دخول Next.js v1.0.0

FlexLayoutSplitScreen يدير الشاشة المنقسمة كما هي. لاستخدام URL فقط في Next.js لتقديم page.tsx على الخادم، استخدم DragBox من @byeolnaerim/flex-layout/next و FlexLayoutNextSplitScreen الذي تم إنشاؤه.

tsx

خيارات دورة حياة الحالة

preserveStateOnUnmount

true면 FlexLayoutSplitScreen이 언마운트되어도 현재 JavaScript runtime의 in-memory split store를 유지합니다. 브라우저 새로고침 persistence와는 별개이며 기본값은 false입니다.

screenKey

split screen 내 화면을 식별하는 key입니다. 생략하면 내부에서 생성됩니다.

خصائص دورة الحياة المهملة

isResetOnChildrenChange لم تعد مستخدمة في سلوك وقت التشغيل ومن المقرر إزالتها. تم استبدال isRemoveStoreOnUnmount بـ preserveStateOnUnmount، ولا يزال هناك اسم مستعار مهمل للتوافق.

تحديث واستعادة URL المتصفح

استمرارية لوحة URL في Next.js

لاستعادة حالة الانقسام حتى عند تحديث المتصفح، حدد persistence في FlexLayoutNextSplitScreen الذي تم إنشاؤه. لا يتم تخزين ReactElement، بل يتم تخزين بيانات التعريف الخاصة بـ Next URL pane القابلة لإعادة الإنشاء فقط.

tsx