بدء سريع

يتولى FlexLayout بشكل أساسي تقسيم الشاشة في اتجاه واحد.

تقسيم الصف الأساسي

tsx

ملاحظات

isResizePanel = trueفي هذه الحالة، سيتم عرض resizePanel كأخ للوعاء. على سبيل المثال، ملكية resizePanel بين وعاء الوسط واليمين تعود للوسط، لكن mid-resizePanel يتعامل مع الأخوة على جانبيه.

تحذير

في معظم حالات الاستخدام، لا تحتاج إلى إضافة isResizePanelإلى العنصر الأخير. إذا أضفتها إلى العنصر الأخير، فقد تتداخل مع وظيفة تغيير الحجم الخاصة بالمتصفح، مما يؤثر سلبًا على تجربة المستخدم.

عند الحاجة إلى العرض الديناميكي كما هو موضح أدناه، isResizePanelمن الأفضل استخدام الحالة بدلاً من عرضها مسبقًا كـ true.

tsx

تقسيم العمود + النمو

تخصيص نسبة معينة لمنطقة معينة في التقسيم العمودي مسبقًا

tsx

ملاحظات

إذا لم تحدد النمو، سيتم توزيع القيم المتبقية بالتساوي على الحاويات التي لم يتم تحديد النمو لها.
أي أن الحاوية العلوية في الكود أعلاه ستحصل على grow = 0.45، بينما ستحصل الحاويات المتوسطة واليمينية على grow = 1.275.

تنبيه

يفضل أن تكون قيمة النمو المحددة عبر props لا تتجاوز عدد الحاويات.

تداخل متعدد

تقسيم أكثر من اتجاه واحد يتم إنشاؤه عن طريق تداخل FlexLayout

tsx

ملاحظات

نظرًا لأن FlexLayout يعتمد على flex في CSS، فقد لا يعمل تغيير الحجم إذا لم يتم تحديد ارتفاع الوالد الأساسي عند تعيين الاتجاه كعمود (على سبيل المثال، auto).
(في هذه الوثيقة، يقوم CodeBlock بدور الارتفاع بشكل ضمني.)
وبالمثل، لن يعمل تغيير الحجم أيضًا في حالة عدم وجود مساحة إضافية قابلة للتغيير.

ملاحظات

يوفر FlexLayoutContainer تكوين الأنماط اللازمة لتفعيل تغيير الحجم مثل width: 100%، height: 100% لأبنائه المباشرين.
إذا كنت لا ترغب في أن يتأثر أي شيء ضمن نطاق تأثيره، يُفضل لفه باستخدام div كأبناء مباشرين أولاً.
لذلك، إذا كنت ترغب في تجنب سلوك غير مقصود، يُنصح بعدم إنشاء أكثر من سليل مباشر واحد.

min/max + isFitContent

تحديد نطاق إعادة الحجم + قيود بناءً على حجم المحتوى

يمكنك ضبط الحد الأدنى/الحد الأقصى للحجم باستخدام CSS في FlexLayoutContainer للتحكم في نطاق إعادة الحجم.

tsx

أو يمكنك استخدامه بهذه الطريقة.

tsx

نتيجة التنفيذ كما يلي.

tsx

ملاحظات

بعد useEffect، لن يقل حجم الحاوية اليسرى عن 25 بكسل ولن يزيد عن 180 بكسل.
إذا كنت ترغب في ضبط الحجم الديناميكي للمحتوى الداخلي على الحجم الأقصى <FlexLayoutContainer isFitContent>...</FlexLayoutContainer>يمكنك استخدامه. الحاوية التي تستخدم isFitContent لن تعيد الحجم أكبر من حجم العناصر الداخلية.

تحذير

في هذا المثال، إذا تم منح Mid Container isFitContentهذا القيمة
سيكون تخطيطًا غير قابل لإعادة الحجم تمامًا لأن قيمة المساحة القابلة للتحريك أصغر من قيمة المساحة المتاحة. إذا لم يكن هذا ما تقصده، فلا تمنح جميع الحاويات قيمة max size. يجب أن تكون واحدة على الأقل من الحاويات بدون قيمة max size.

وضع حركة اللوحة (panelMovementMode)

كيفية تفاعل اللوحات المجاورة عند إعادة الحجم

panelMovementModeهو خاصية تتحكم في كيفية تحريك اللوحات المجاورة عند إعادة حجم اللوحة. القيمة الافتراضية هي divorceويمكن استخدام الأوضاع أدناه.

bulldozer

يدفع اللوحات المجاورة بعيدًا ولكنها لا تلتصق ببعضها.

divorce (기본값)

يدفع اللوحات المجاورة بعيدًا وتلتصق ببعضها، ولكن عند العودة إلى الموقع الذي بدأت منه إعادة الحجم، تنفصل مرة أخرى.

stalker

تلتصق اللوحات المجاورة تمامًا ولكن عند الوصول إلى النهاية، تنفصل مرة أخرى.

tsx

آخر فحص

layoutName / containerName

layoutName / containerNameيستخدم كـ idعنصر DOM المُعتمد، وأيضًا getLayoutInfos, useDecompositionLayout في Hooks مثل Keyيستخدم كـ.

يجب أن تكون القيمة فريدة داخل الصفحة. فريدةإذا تكررت، قد يحدث تصادم في المفاتيح الداخلية مما يؤدي إلى سلوك غير مقصود مثل اختلاط أهداف إعادة الحجم/الاشتراك.
يجب أن تكون القيمة مستقرفريدة. إذا تغيرت في كل عملية عرض أو تغيرت بناءً على شروط، قد يتم قطع الحالة/الاشتراك الحالي ويتم التعرف عليها كـ "تخطيط آخر".
تجنب استخدام الفراغات / الرموز الخاصة، ويفضل استخدام القيم التي تتكون من أحرف إنجليزية / أرقام و -، _.
isResizePanel معرف مشتق عند الاستخدام${ContainerName} + '_resize_panel' سيتم إنشاؤه إضافيًا. حافظ على تسمية الحاويات بشكل متسق وفريد.

isResizePanel

سيتم عرض لوحة إعادة الحجم كأخت للحاوية.

مثال: بين Mid و Right، ملكية لوحة إعادة الحجم تعود لـ Mid، لكن لوحة إعادة الحجم تتعامل مع الأخوات على الجانبين.

grow

"حدد" النسبة الأولية لحاوية معينة.

ستوزع الحاويات غير المحددة للنمو بالتساوي ما عدا النمو المحدد.

isFitContent

يتم تقييد الحاوية بحيث لا تعيد حجمها أكبر من حجم العناصر الداخلية.

panelMovementMode

حدد كيفية تفاعل اللوحات المجاورة عند إعادة حجم اللوحة.

"bulldozer": تدفع اللوحة المجاورة ولكن لا تلتصق بها.

"divorce": تدفع اللوحة المجاورة وتلتصق بها، ولكن عند العودة تنفصل (الإعداد الافتراضي)

"stalker": تلتصق اللوحات المجاورة تمامًا ولكن تنفصل عند الوصول إلى النهاية.