تصميم المكونات
تصميم مكونات رسومية لتطبيقات الويب
سيكون من الممكن وضع العناصر على المساحة الفارغة من القماش ببساطة ، ولكن من الأفضل محاولة جعل كل شيء منظمًا ومرتبًا على الفور. لذلك ، في البداية ، سنقوم بتصميم مساحة العمل. دعنا نضيف مكونًا ( Container ) إلى اللوحة القماشية حيث سنضع جميع العناصر الأخرى. بعد الإضافة ، يجب النقر فوق رمز الترس والمتابعة إلى تكوين هذه الحاوية.
إعدادات الحاوية
دعنا ننتقل إلى الإعدادات المتاحة.
- Name - الاسم الذي يمكن أن نشير تحته إلى هذه الحاوية في العمليات التجارية للتطبيق. على سبيل المثال ، إذا أردنا إنشاء عملية تجارية لتغيير بعض إعدادات هذه الحاوية.
- Direction - الاتجاه الذي سيتم فيه وضع العناصر داخل الحاوية المحددة. أفقيًا ، إذا كنت ترغب في ترتيبها في صف واحد تلو الآخر ، أو العكس ، عموديًا ، عندما تدخل العناصر تحت بعضها البعض.
- Wrap - تحديد إخراج العناصر. هل يجب أن يكونوا على نفس الخط (Nowrap) ، أم يمكن لفهم (التفاف).
- Alignment - كيف يجب محاذاة العناصر الموجودة في الحاوية (إعداد منفصل للمحاذاة الأفقية والرأسية).
- Size - حجم الحاوية. يمكن تعيينها كنسبة مئوية من المساحة المتاحة أو أن يكون لها حجم ثابت بدقة بالبكسل.
- Max Width الأقصى - الحد الأقصى للعرض المسموح به (في حالة عدم تحديده بشكل صارم ويختلف حسب المحتوى).
- Margin/Padding - مسافة بادئة من حدود الحاوية. خارجي أو داخلي على التوالي.
- Image, Gradient or Overlay (Background color) - القدرة على تعيين الخلفية المطلوبة. يمكنك اختيار لون معين (أو مزيج من ألوان مختلفة مع تدرج) أو تحديد صورة خلفية.
- Border - اختيار الإطار ومظهره (اللون ، السماكة ، نصف قطر التقريب).
- Visible - رؤية العنصر (بالإضافة إلى جميع العناصر المتداخلة).
يمكن رؤية الإعدادات المحددة في لقطة الشاشة. بالطبع يمكنك تجربتها وتغييرها باختيار تصميمك الفريد.
دعنا نضيف واحدة أخرى إلى الحاوية التي تم إنشاؤها. سنضيف إليها حقول الإدخال الضرورية. اضبطه على الوضع الرأسي ، المحاذاة للوسط ، عرض 40٪ ، وترك مساحة اليسار (padding-left 20px).
مكونات التطبيق
بعد ذلك ، أضف المكونات نفسها إلى الحاوية. تقبل عملية العمل الخاصة بنا رقمين من نوع float . لإدخالها ، تحتاج إلى إضافة Input ( float ) ، زر ( Button ) ، والذي سيبدأ عملية الحساب ، وإجراء تعديل مرئي صغير لتوقيع Label الخاصة بهم.
دعنا نضيف كتلة أخرى حيث سنوقع على ما نخطط لحسابه بشكل عام (الجمع والطرح وما إلى ذلك). دعنا نضبط العرض على 30٪ مع ترتيب العناصر رأسيًا وتوسيطها ومحاذاة لليمين ( end/center ). دعنا نضيف 5 مكونات Label إلى الحاوية نفسها ونغير نصها على الفور إلى العنصر المطلوب.
الخطوة الأخيرة في التصميم المرئي هي إضافة حاوية أخرى لعرض نتيجة الحساب. أضفناها عن طريق القياس مع الحاوية السابقة ، لكننا قمنا بتعيين المحاذاة إلى اليمين مع حشوة صغيرة على اليسار. ميزة هذه الحاوية هي أنها ستكون غير مرئية في البداية (المفتاح Visible ). دعنا نشغلها في الوقت الذي نحصل فيه على نتيجة الحسابات. دعنا نضيف 5 مكونات Label إليها ، ولا نحتاج حتى إلى تغيير نصها لأن الكتلة لا تزال غير مرئية (الشيء الرئيسي هو تعيين Name بحيث يمكنك تحديد العنصر الضروري عند إنشاء العمليات التجارية).
إذا تم كل شيء بشكل صحيح ، فسنرى النتيجة التالية في مصمم الويب:
وهذا في التطبيق المنشور:
