ال ' شاشة ح يتم استخدام فئة '' في Tailwind لتعيين ارتفاع إطار العرض لعنصر HTML. يعد Viewport مجرد اسم آخر لحجم شاشة العميل. يمكن للمطور تحديد إطار العرض بالكامل بسهولة بمساعدة هذا ' شاشة ح ' ثم قم بتطبيق عدة فئات Tailwind وفقًا لذلك.
ستوفر هذه المقالة الإجراء الخاص بإضافة ارتفاع إطار العرض إلى عنصر في Tailwind باستخدام ' شاشة ح ' فصل.
كيفية تعيين ارتفاع إطار العرض لعنصر ما باستخدام فئة 'h-screen' في Tailwind؟
إذا تم تعيين ارتفاع إطار العرض لعنصر ما باستخدام ' شاشة ح '، سيتم ضبط خاصية الارتفاع تلقائيًا وفقًا لشاشة العميل. من أجل استخدام ارتفاع إطار العرض في Tailwind، اتبع الاصطلاح الموضح أدناه:
< شعبة فصل = 'شاشة ح' > مرحبًا < / شعبة >
ومن العرض أعلاه يتضح أن ' شاشة ح ' يتم استخدامه في سمة فئة العنصر جنبًا إلى جنب مع فئات Tailwind الأخرى المختلفة لتصميم التخطيط.
لنقم بإنشاء لوحة معلومات وهمية، ونعطي ارتفاعًا لإطار العرض للشريط الجانبي لشاشة لوحة المعلومات.
< شعبة فصل = 'ثني' >
< شعبة فصل = 'w-56 شاشة h مدورة-lg bg-blue-600 نص مركزي نص-سماوي-50 py-6 نص-2xl خط غامق' > لوحة القيادة
< ماي فصل = 'النص-إل جي py-8 الفضاء-y-7' >
< الذي - التي >الفريق< / الذي - التي >
< الذي - التي >المشاريع< / الذي - التي >
< الذي - التي >التقارير< / الذي - التي >
< الذي - التي >الوثائق< / الذي - التي >
< / ماي >
< / شعبة >
< شعبة فصل = 'نص مركز النص-3xl py-8 ps-5' >مرحبًا بك في لوحة التحكم!< / شعبة >
< / شعبة >
شرح الكود :
- اولا ' شعبة 'يتم إنشاء العنصر بفئة' ثني '، تقوم هذه الفئة بمحاذاة العناصر الموجودة في خط أفقي.
- بعد ذلك، قم بإنشاء 'آخر' شعبة 'مع 8 بكسل من الحشو العلوي والسفلي باستخدام' الحمر -2 'فئة وتخصيصها بعرض ثابت باستخدام' ث-56 ' فصل. بعد ذلك، قم بتعيين ارتفاع العنصر على ارتفاع إطار العرض باستخدام ' شاشة ح ' فصل. تم ضبط زوايا الحاوية على شكل دائري.
- ال ' ب ج-{اللون}-{رقم} 'يتم استخدام الفئة لتوفير لون خلفية للحاوية. ال ' مركز النص 'يقوم الفصل بمحاذاة محتوى النص إلى المركز. تم ضبط وزن الخط للنص على ' عريض '، وحجم الخط هو' 2xl '.
- بعد ذلك، قائمة غير مرتبة '< ماي >' تم إنشاؤه بحجم خط كبير و' 48 بكسل 'الهامش العلوي باستخدام فئة الريح الخلفية 'space-y'.
- بعد ذلك، يتم إنشاء أربعة عناصر قائمة باستخدام '< الذي - التي >' العلامات.
- آخر ' شعبة 'يتم إنشاء العنصر باستخدام 32 بكسل من أعلى إلى أسفل و20 بكسل من الحشو المضمن في البداية باستخدام ' الحمر' و'ملاحظة ' الطبقات.
إخراج الكود الموضح أعلاه هو كما يلي:
من الناتج أعلاه، من الواضح أن الشريط الجانبي للوحة القيادة له ارتفاع إطار العرض للشاشة. هذا هو كل شيء عن الغرض من ' شاشة ح 'فئة في Tailwind.
خاتمة
ال ' شاشة ح يتم استخدام فئة '' في Tailwind لتعيين ارتفاع Viewport لعنصر ما، أي ارتفاع شاشة العميل. باستخدام ' شاشة ح '، سيرث العنصر تلقائيًا ارتفاع الشاشة. من أجل استخدام ارتفاع إطار العرض في Tailwind، ' شاشة ح 'يجب تمرير الخاصية كقيمة لـ ' فصل ' سمة مثل '< فئة div = 'شاشة h'. '>'. لقد قدمت هذه المقالة الإجراء الخاص باستخدام ' شاشة ح 'فئة في Tailwind.