' ایچ اسکرین Tailwind میں کلاس کا استعمال HTML عنصر کو ویو پورٹ کی اونچائی تفویض کرنے کے لیے کیا جاتا ہے۔ ویو پورٹ کلائنٹ کی سکرین کے سائز کا صرف ایک اور نام ہے۔ ڈویلپر اس کی مدد سے پورے ویو پورٹ کو آسانی سے منتخب کر سکتا ہے۔ ایچ اسکرین کلاس کریں اور پھر اس کے مطابق متعدد ٹیل ونڈ کلاسز کا اطلاق کریں۔
یہ مضمون Tailwind میں 'کا استعمال کرتے ہوئے ایک عنصر میں ویو پورٹ کی اونچائی کو شامل کرنے کا طریقہ کار فراہم کرے گا۔ ایچ اسکرین 'کلاس.
Tailwind میں 'h-screen' کلاس کا استعمال کرتے ہوئے کسی عنصر کی ویو پورٹ کی اونچائی کیسے سیٹ کی جائے؟
اگر کسی عنصر کو 'کا استعمال کرتے ہوئے ویو پورٹ کی اونچائی تفویض کی گئی ہے۔ ایچ اسکرین 'کلاس، یہ کلائنٹ کی سکرین کے مطابق اس کی اونچائی کی خاصیت کو خود بخود ایڈجسٹ کرے گا۔ Tailwind میں ویوپورٹ کی اونچائی کو استعمال کرنے کے لیے، ذیل میں فراہم کردہ کنونشن کی پیروی کریں:
< div کلاس = 'ایچ اسکرین' > ہیلو < / div >
مندرجہ بالا مظاہرے سے یہ واضح ہے کہ ' ایچ اسکرین لے آؤٹ کو ڈیزائن کرنے کے لیے ٹیل ونڈ کی مختلف کلاسز کے ساتھ عنصر کی کلاس وصف میں استعمال کیا جاتا ہے۔
آئیے ایک ڈمی ڈیش بورڈ بنائیں، اور ڈیش بورڈ اسکرین کے سائڈبار کو ویو پورٹ کی اونچائی دیں۔
< div کلاس = 'فلیکس' >
< div کلاس = 'w-56 h-اسکرین گول-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl فونٹ-بولڈ' > ڈیش بورڈ
< ال کلاس = 'text-lg py-8 space-y-7' >
< کہ >ٹیم< / کہ >
< کہ >منصوبے< / کہ >
< کہ >رپورٹس< / کہ >
< کہ >دستاویزات< / کہ >
< / ال >
< / div >
< div کلاس = 'متن-مرکز متن-3xl py-8 ps-5' >ڈیش بورڈ میں خوش آمدید!< / div >
< / div >
کوڈ کی وضاحت:
- سب سے پہلے، ایک ' div ' عنصر ' کی کلاس کے ساتھ بنایا گیا ہے فلیکس ”، یہ کلاس رہائش پذیر اشیاء کو افقی لائن میں سیدھ میں لاتی ہے۔
- اگلا، ایک اور بنائیں ' div ” کا استعمال کرتے ہوئے اوپر اور نیچے کی پیڈنگ کے 8px کے ساتھ py-2 'کلاس کریں اور اسے استعمال کرتے ہوئے ایک مقررہ چوڑائی مختص کریں' w-56 'کلاس. اگلا، عنصر کی اونچائی کو ویو پورٹ کی اونچائی پر سیٹ کریں ' ایچ اسکرین 'کلاس. کنٹینر کے کونوں کو گول کرنے کے لیے سیٹ کیا گیا ہے۔
- ' bg-{color}-{number} ” کلاس کا استعمال کنٹینر کو پس منظر کا رنگ فراہم کرنے کے لیے کیا جاتا ہے۔ ' متن کا مرکز کلاس متن کے مواد کو مرکز میں سیدھ میں لاتی ہے۔ متن کے لیے فونٹ کا وزن ' بولڈ ، اور فونٹ کا سائز ہے ' 2xl '
- اگلا، ایک غیر ترتیب شدہ فہرست '< ال >' بڑے فونٹ سائز اور ایک کے ساتھ بنایا گیا ہے۔ 48px 'اسپیس وائی' ٹیل ونڈ کلاس کا استعمال کرتے ہوئے مارجن ٹاپ۔
- اس کے بعد، '< کا استعمال کرتے ہوئے چار فہرست آئٹمز بنائے جاتے ہیں۔ کہ >' ٹیگز۔
- ایک اور' div عنصر کو 32px ٹاپ باٹم اور 20px ان لائن اسٹارٹ پیڈنگ کے ساتھ بنایا گیا ہے۔ py' اور 'ps 'کلاسز.
مندرجہ بالا وضاحت کردہ کوڈ کی پیداوار مندرجہ ذیل ہے:
مندرجہ بالا آؤٹ پٹ سے، یہ واضح ہے کہ ڈیش بورڈ سائڈبار میں اسکرین کی ویوپورٹ اونچائی ہے۔ یہ سب کے مقصد کے بارے میں ہے ' ایچ اسکرین ٹیل ونڈ میں کلاس۔
نتیجہ
' ایچ اسکرین Tailwind میں کلاس کا استعمال ویو پورٹ کی اونچائی کو کسی عنصر یعنی کلائنٹ کی سکرین کی اونچائی کو تفویض کرنے کے لیے کیا جاتا ہے۔ کا استعمال کرتے ہوئے ' ایچ اسکرین 'کلاس، عنصر خود بخود اسکرین کی اونچائی کا وارث ہوجائے گا۔ Tailwind میں ویو پورٹ کی اونچائی استعمال کرنے کے لیے، ' ایچ اسکرین ' جائیداد کو ایک قدر کے طور پر پاس کرنا ہوگا ' کلاس ' وصف جیسے '< div کلاس = 'ایچ اسکرین '>' اس مضمون نے استعمال کرنے کا طریقہ کار فراہم کیا ہے۔ ایچ اسکرین ٹیل ونڈ میں کلاس۔