ستوفر هذه المدونة فكرة عن تخصيص مساحة متساوية بين عناصر متعددة في Tailwind.
كيفية تعيين مساحة متساوية بين عناصر متعددة في الريح الخلفية؟
يمكن للمستخدمين تعيين مسافات متساوية بين العناصر باستخدام ' مساحة-{x/y}-{الحجم} 'فئة المرافق. يمكن للمستخدمين إضافة مسافة على المحور x أو y عن طريق تحديد قيمة عددية. تعتبر أداة التباعد ضرورية لأنها تجعل صفحة الويب جذابة. إذا لم تكن صفحة الويب تحتوي على مسافات مناسبة بين العناصر، فلن تجذب المستخدمين.
لنأخذ مثالاً على التعليمات البرمجية لتعيين مساحة متساوية بين عناصر الشبكة.
الطريقة الأولى: تخصيص مساحة على المحور السيني.
المساحة المتساوية المخصصة على المحور السيني تجعل المسافة متساوية على يمين ويسار العنصر. لتعيين المسافة على المحور السيني، استخدم الصيغة التالية:
فضاء - س - { مقاس }
يمكن أن يكون الحجم أي قيمة عددية.
خذ بعين الاعتبار الكود أدناه لتعيين مساحة متساوية على المحور السيني:
< جسم >< شعبة فصل = 'mx-4 شبكة الشبكة-cols-4 مسافة-x-4' >
< شعبة فصل = 'bg-أخضر-400 ح-16 مدور-إل جي حدود-2 حدود-أخضر-800' > 1 شعبة >
< شعبة فصل = 'bg-أخضر-400 ح-16 مدور-إل جي حدود-2 حدود-أخضر-800' > 2 شعبة >
< شعبة فصل = 'bg-أخضر-400 ح-16 مدور-إل جي حدود-2 حدود-أخضر-800' > 3 شعبة >
< شعبة فصل = 'bg-أخضر-400 ح-16 مدور-إل جي حدود-2 حدود-أخضر-800' > 4 شعبة >
شعبة >
جسم >
في هذا الكود:
- ' مكس-4 'يضيف هامشًا قدره 4 بيكسل على المحور السيني (الأيمن والأيسر).
- ال ' شبكة 'الفصل ينشئ شبكة.
- ال ' شبكة كولز 4 'اصنع 4 أعمدة في الشبكة.
- ال ' الفضاءx-4 ' يضيف مسافة 4 بكسل بين عناصر الشبكة.
- ' بي جي-الأخضر-400 ' يضبط لون الخلفية على اللون الأخضر.
- ' ح-16 ' يضبط الارتفاع على 16 بكسل.
- ال ' مدور إل جي ” يجعل الزاوية مستديرة ونصف قطر الحدود كبير.
- ال ' الحدود-2 'ينشئ حدًا بحجم 2 بكسل حول العنصر.
- ' الحدود الخضراء-800 'يجعل الحدود خضراء داكنة.
انتاج |
معاينة الإخراج الذي تم إنشاؤه بواسطة الكود أعلاه:
يمكن ملاحظة أنه تم تعيين مسافة 4 بكسل بين العناصر.
الطريقة الثانية: تخصيص مساحة على المحور الصادي.
يمكن تعيين التباعد على المحور y بطريقة مشابهة للطريقة المذكورة أعلاه، من خلال تغييرات صغيرة في الكود أعلاه. يقوم بتعيين مسافات على طول المحور y (العلوي والسفلي). بناء الجملة لذلك هو:
يمكن تنفيذ الكود أدناه لإضافة مسافات على طول المحور y:
< جسم >< شعبة فصل = 'mx-4 my-4 الفضاء-y-4' >
< شعبة فصل = 'bg-أخضر-400 ح-16 مدور-إل جي حدود-2 حدود-أخضر-800' > 1 شعبة >
< شعبة فصل = 'bg-أخضر-400 ح-16 مدور-إل جي حدود-2 حدود-أخضر-800' > 2 شعبة >
< شعبة فصل = 'bg-أخضر-400 ح-16 مدور-إل جي حدود-2 حدود-أخضر-800' > 3 شعبة >
< شعبة فصل = 'bg-أخضر-400 ح-16 مدور-إل جي حدود-2 حدود-أخضر-800' > 4 شعبة >
شعبة >
جسم >
في هذا الكود:
- ' مكس-4 'يضيف هامشًا قدره 4 بكسل إلى يسار ويمين العناصر لجعل الإخراج أكثر تحسينًا.
- ' بلدي-4 'يضيف هامشًا قدره 4 بكسل على المحور y (العلوي والسفلي).
- ' الفضاء-y-4 ' يضيف مساحة قدرها 4 بكسل على المحور الصادي (العلوي والسفلي).
انتاج |
احفظ الكود أعلاه وقم بمعاينة صفحة الويب التي أنشأتها لترى التباعد على النحو التالي:
يتعلق الأمر كله بتعيين مساحة متساوية بين العناصر.
خاتمة
لتعيين مسافة متساوية بين عناصر متعددة في Tailwind، يمكن للمستخدمين استخدام ' مساحة-{x/y}-{الحجم} 'فئة الأداة المساعدة وحدد قيمة عددية بالحجم وفقًا للمتطلبات. إن التباعد المتساوي بين العناصر يجعل المخرجات أكثر قابلية للتطوير ويحافظ المشاهدون على تفاعلهم مع صفحة الويب. قدمت هذه المشاركة طريقة لتعيين مساحة متساوية بين عناصر متعددة في Tailwind.