الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

تفاعل المساحات

يتيح لك React System Easy -Exply and Nestable Depaces تقسيم صفحة أو حاوية إلى مساحات مرسمة وقابلة للتمرير وقابلة للتمرير مما يتيح لك إنشاء واجهات مستخدم سطح المكتب/نوع الهاتف المحمول في المتصفح.

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

  • لا تصميم لتحقيق تخطيطات بسيطة أو معقدة.
  • تعرف المساحات كيفية التصرف فيما يتعلق ببعضها البعض وتغيير حجمها وفقًا لذلك.
  • لا تحتوي المساحات على أي عنصر بصري لهم (حتى الحشو أو الهوامش). يمكنك ملءهم بكل ما تريد.

الإصدار 0.2.0 إصدار - قراءة ملاحظات الإصدار هنا.

عرض الوثائق الكاملة هنا.

مسافات المستوى الأعلى

تستخدم في المستوى العلوي من جميع المساحات الأخرى.

<viewport />

سيتولى هذا المساحة إطارات المشاهدة الكاملة لنافذة المتصفح. سيؤدي تغيير حجم نافذة المتصفح تلقائيًا إلى ضبط حجم هذه المساحة وجميع المساحات المتداخلة.

<ثابت />

يمكن إعطاء هذا المساحة ارتفاعًا واختياريًا عرضًا (بشكل افتراضي سيحجم إلى 100 ٪ من الحاوية). سيتم احتواء جميع المساحات المتداخلة في مساحة الحجم الثابت هذه.

المساحات الراسخة

يمكن استخدامها في المساحات ذات المستوى الأعلى <Viewport /> و <ثابت /> أو متداخلة داخل مساحات أخرى.

<يسار /> و <يمين />

مساحة ترتكز على اليسار أو يمين الحاوية/الفضاء الأصل. يمكن تحديد الحجم بالبكسل أو كنسبة مئوية لتحديد عرضه.

<أعلى /> و <أسفل />

مساحة ترتكز على الجزء العلوي أو أسفل الحاوية/الفضاء الأصل. يمكن تحديد الحجم بالبكسل أو كنسبة مئوية لتحديد ارتفاعه.

هناك إصدارات يمكن إصلاحها من هذه المكونات تسمى <leftresizable /> ، <rightresivable /> ، <topresible /> و <bottomresible /> والتي تسمح بتوزيل المساحات من الحافة الخارجية عن طريق السحب مع الماوس.

آخر

<fill />

مساحة تستهلك أي مساحة متوفرة في الحاوية/المساحة الأصل مع مراعاة أي مساحات مثبتة على كل جانب.

<وضع />

مساحة يمكن وضعها على الإطلاق داخل مساحة الوالدين إما عن طريق الأعلى واليسار والعرض والارتفاع أو أعلى وأيسر واليمين والأسفل.

<طبقة />

تتيح لك الطبقات إنشاء طبقات داخل مساحة الوالدين ، على سبيل المثال: 

 < ViewPort >
	< Layer zIndex =" {0} " > < LeftResizable size =" 20% " /> // floating sidebar </ Layer >
	< Layer zIndex =" {1} " >
		< Fill />
	</ Layer >
</ ViewPort >

<تركز />

يركز محتوى الفضاء أفقيا ورأسيا.

<centeredverticary />

يركز محتوى المساحة عموديًا.

ابدء

للبدء في مساحات React التي تحتاجها: 

 npm install react - spaces -- save 
 import * as Spaces from "react-spaces" ;

عرض الوثائق الكاملة هنا.

هبة

إذا وجدت هذه المكتبة مفيدة ، ففكر في تقديم تبرع صغير لتمويل فنجان من القهوة:

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل