یہ مضمون Tailwind میں Hover، Focus اور دیگر ریاستوں میں کم از کم اونچائی کی پراپرٹی کو لاگو کرنے کا طریقہ کار فراہم کرے گا۔
نوٹ: Tailwind میں کم از کم اونچائی کی کلاسوں کے بارے میں مزید جاننے کے لیے، اسے پڑھیں مضمون ہماری ویب سائٹ پر.
ٹیل ونڈ میں ہوور، فوکس اور دیگر ریاستوں میں کم سے کم اونچائی کی پراپرٹی کو کیسے لاگو کیا جائے؟
ٹیل وِنڈ ڈیفالٹ اسٹیٹ ویریئنٹس فراہم کرتا ہے جو ڈیزائن کی خصوصیات کے ساتھ فراہم کیے جا سکتے ہیں۔ ان ریاستی تغیرات میں 'ہوور'، 'فوکس' اور 'ایکٹو' شامل ہیں۔ ان ریاستی متغیرات کی تفصیل اس طرح ہے:
- ' ہوور جب بھی ماؤس کرسر کسی عنصر پر منڈلاتا ہے تو حالت کو متحرک کیا جاتا ہے۔
- ' توجہ مرکوز جب بھی عنصر فوکس میں ہوتا ہے تو حالت کو متحرک کیا جاتا ہے۔
- ' فعال جب بھی عنصر کو چالو کیا جاتا ہے یا اس پر کلک کیا جاتا ہے تو حالت کو متحرک کیا جاتا ہے۔
آئیے ان ریاستوں میں سے ہر ایک کے ساتھ ایک ایک کرکے کم از کم اونچائی کی خاصیت کا استعمال کریں۔
ہوور اسٹیٹ کے ساتھ کم از کم اونچائی والی پراپرٹی کا استعمال
استعمال کرنے کے لیے ' کم از کم اونچائی ٹیل ونڈ میں ہوور اسٹیٹ ویرینٹ کے ساتھ کلاس، درج ذیل نحو استعمال کیا جاتا ہے:
< div کلاس = 'ہوور: منٹ-ایچ-{سائز}...' > < / div >
آئیے ایک مظاہرے میں اوپر بیان کردہ نحو کا استعمال کریں۔ اس مثال میں، جب بھی ماؤس کرسر عنصر پر منڈلاتا ہے تو ہم عنصر کی کم از کم اونچائی میں اضافہ کریں گے۔
< div کلاس = 'min-h-fit rounded-md bg-blue-700 text-center text-white hover:min-h-screen' >کم سے کم کو بڑھانے کے لیے ہوور کریں۔ اونچائی < / div >مندرجہ بالا کوڈ کی وضاحت اس طرح ہے:
- ' min-w-fit ” کلاس کم از کم اونچائی کی حد مقرر کرتی ہے جس کی اونچائی div عنصر کو اس کے مواد میں فٹ ہونے کے لیے درکار ہے۔
- ' hover:min-w-screen کلاس اسکرین کے سائز کے 100% کے برابر اونچائی کی کم از کم حد فراہم کرے گی۔
- ' rounded-md '،' bg-{color}-{number} '،' متن کا مرکز '، اور ' متن سفید ” کلاسز بالترتیب div عنصر کے لیے گول کونوں، پس منظر کا رنگ، مرکز سے منسلک متن، اور سفید متن کے رنگ کے لیے ذمہ دار ہیں۔ div عنصر کے کونے گول ہیں۔
آؤٹ پٹ:
نیچے دیے گئے آؤٹ پٹ سے یہ واضح ہے کہ عنصر کی کم از کم اونچائی اسکرین کے سائز کے 100% تک بڑھ جاتی ہے کیونکہ ماؤس کرسر اس پر منڈلاتا ہے۔
فوکس اسٹیٹ کے ساتھ کم از کم اونچائی کی پراپرٹی کا استعمال
استعمال کرنے کے لیے ' کم از کم اونچائی Tailwind میں فوکس اسٹیٹ کے ساتھ کلاس، درج ذیل نحو استعمال کیا جاتا ہے:
< div کلاس = 'فوکس: منٹ-ایچ-{سائز}...' > < / div >آئیے ایک مظاہرے میں اوپر بیان کردہ نحو کا استعمال کریں۔ اس مثال میں، ان پٹ فیلڈ کی کم از کم اونچائی اس وقت بڑھ جائے گی جب صارف اس پر فوکس کرے گا۔
< ان پٹ پلیس ہولڈر = 'اس ان پٹ فیلڈ پر توجہ مرکوز کریں' کلاس = 'min-h-0 h-fit w-48 rounded-md bg-gray-200 ٹیکسٹ سنٹر فوکس:min-h-[35%]' >< / ان پٹ >مندرجہ بالا کوڈ کی وضاحت اس طرح ہے:
- ایک ' ان پٹ ” فیلڈ پلیس ہولڈر انتساب میں کچھ متن کے ساتھ بنایا گیا ہے۔
- اسے استعمال کرتے ہوئے 0px کی کم از کم اونچائی کی حد فراہم کی گئی ہے۔ min-h-0 'کلاس. لہذا، ڈویلپر نے عنصر کی ڈیفالٹ اونچائی کو اس اونچائی کے برابر سیٹ کیا جو مواد کو فٹ کرنے کے لیے درکار ہے ' h-fit 'کلاس.
- ' فوکس: منٹ-h-[35%] کلاس ان پٹ فیلڈ کی کم از کم اونچائی کی حد کو بڑھا دے گی جب صارف اس پر توجہ مرکوز کرے گا۔
آؤٹ پٹ:
نیچے دیے گئے آؤٹ پٹ سے یہ واضح ہے کہ ان پٹ فیلڈ کی اونچائی بڑھ جاتی ہے کیونکہ صارف اس پر فوکس کرتا ہے۔ اس کی وجہ یہ ہے کہ اونچائی کی کم از کم حد اسکرین کی اونچائی کے 0px سے 35% تک بڑھ جاتی ہے۔
Tailwind میں فعال حالت کے ساتھ کم از کم اونچائی کی جائیداد کا استعمال
استعمال کرنے کے لیے ' کم از کم اونچائی ٹیل ونڈ میں ایکٹو اسٹیٹ ویرینٹ کے ساتھ پراپرٹی، درج ذیل نحو استعمال کیا جاتا ہے:
< div کلاس = 'فعال: منٹ-ایچ-{سائز}...' > < / div >آئیے ایک مظاہرے میں اوپر بیان کردہ نحو کا استعمال کریں۔ اس مثال میں، بٹن کی کم از کم اونچائی بڑھ جائے گی جب صارف اس پر فعال طور پر کلک کرے گا۔
< بٹن کلاس = 'min-h-0 h-fit w-48 rounded-md bg-blue-300 ٹیکسٹ سینٹر فعال: min-h-[35%]' > بڑھانے کے لیے کلک کریں۔ اونچائی < / بٹن >0px کی کم از کم اونچائی کی حد کے ساتھ ایک بٹن بنایا گیا ہے۔ تاہم، استعمال کرتے ہوئے ' فعال: min-h-[35%] جب بھی بٹن پر کلک کیا جائے گا تو کم از کم اونچائی کی حد اسکرین کے سائز کے 0px سے 35% تک بڑھ جائے گی۔
آؤٹ پٹ:
مندرجہ ذیل آؤٹ پٹ میں دیکھا جا سکتا ہے کہ جب صارف اس پر کلک کرتا ہے تو بٹن کی کم از کم اونچائی بڑھ جاتی ہے۔
یہ سب کچھ Tailwind ہوور، فوکس، اور Tailwind کی دیگر ریاستوں میں کم از کم اونچائی کی خاصیت کو لاگو کرنے کے بارے میں ہے۔
نتیجہ
ٹیل ونڈ میں ہوور، فوکس اور ایکٹیو جیسے اسٹیٹ ویریئنٹس صارفین کو متحرک ڈیزائن لے آؤٹ بنانے کی اجازت دیتے ہیں۔ Tailwind میں ریاستی متغیرات کے ساتھ کم از کم اونچائی کی کلاس استعمال کرنے کے لیے، ' hover:min-h-{value} '،' فوکس: منٹ-ایچ-{قدر} '، اور ' فعال: min-h-{value} 'کلاسز کا استعمال کیا جاتا ہے. اس مضمون نے Tailwind میں کم از کم اونچائی والے طبقے کے ساتھ ہوور، فوکس اور دیگر ریاستوں کو لاگو کرنے کا طریقہ کار فراہم کیا ہے۔