یہ مضمون وضاحت کرے گا کہ ٹیل ونڈ میں اخترن کسر کو کیسے استعمال کیا جائے۔
Tailwind CSS میں ڈاگونل فریکشنز کا استعمال کیسے کریں؟
ٹیل ونڈ میں اخترن فریکشن کلاس ایک پہلے سے طے شدہ عددی فونٹ کی مختلف قسم ہے جو ہندسوں اور ڈینومینیٹر کو چھوٹا بناتی ہے اور انہیں سلیش سے الگ کرتی ہے۔ اس سے کسر نمبر باقی متن سے الگ نظر آتا ہے۔
نحو
استعمال کرنے کا نحو ' اخترن-فرکشن 'کلاس درج ذیل ہے:
< div کلاس = 'ترچھی فریکشن' >
< div / >
جیسا کہ آپ مندرجہ بالا نحو سے دیکھ سکتے ہیں، ڈویلپر کو فراہم کرنا ہوگا ' اخترن-فرکشن ' میں ' کلاس عنصر کی خصوصیت۔
آئیے ایک عملی مثال کے طور پر 'ڈیگنل فریکشن' کلاس کا استعمال کریں۔ مندرجہ ذیل مظاہرے میں، صارف عام حصوں اور اخترن حصوں کے درمیان فرق دیکھ سکتا ہے:
< div کلاس = 'bg-slate-200 text-center text-lg' >< ص > نارمل فریکشنز: 3 / 5 6 / 3 6 / 5 < / ص >
< ص کلاس = 'ترچھی فریکشن' >ترچھی کسر: 3 / 5 6 / 3 6 / 5 < / ص >
< / div >
مندرجہ بالا کوڈ کی وضاحت اس طرح ہے:
- ' div ' عنصر کو استعمال کرتے ہوئے پس منظر کے رنگ کے طور پر بنایا اور فراہم کیا جاتا ہے ' bg-{color}-{number} 'کلاس.
- اس کے بعد، متن کو ایک بڑا فونٹ سائز فراہم کیا جاتا ہے اور اسے عنصر کے مرکز میں ' متن-lg 'اور' متن کا مرکز 'بالترتیب کلاسز۔
- اگلا، دو' ' عناصر بنائے جاتے ہیں، جہاں دوسرا فراہم کیا جاتا ہے ' اخترن-فرکشن 'کلاس.
آؤٹ پٹ:
اوپر والے آؤٹ پٹ میں اخترن فریکشن اور نارمل فریکشن کے درمیان فرق واضح طور پر دیکھا جا سکتا ہے۔
بریک پوائنٹس کے ساتھ ڈائیگنل فریکشن کلاس کا استعمال
ٹیل ونڈ میں بریک پوائنٹس کو میڈیا کے سوالات کے طور پر استعمال کیا جاتا ہے۔ مخصوص کم از کم چوڑائی کے ساتھ پانچ ڈیفالٹ بریک پوائنٹس ہیں۔ ان بریک پوائنٹس کو ٹیل ونڈ میں کسی بھی کلاس کے ساتھ جوابی اور متحرک ڈیزائن لے آؤٹ بنانے کے لیے استعمال کیا جا سکتا ہے۔
استعمال کرنے کے لیے ' اخترن-فرکشن Tailwind میں بریک پوائنٹ کے ساتھ کلاس، درج ذیل نحو استعمال کیا جاتا ہے:
{ بریک پوائنٹ کا سابقہ } : ترچھا حصہنیچے دی گئی جدول Tailwind میں مختلف بریک پوائنٹس کے لیے کم از کم چوڑائی فراہم کرتی ہے:
| بریک پوائنٹ کا سابقہ | کم از کم چوڑائی |
|---|---|
| sm | 640px |
| md | 768px |
| ایل جی | 1024px |
| xl | 1280px |
| 2xl | 1536px |
آئیے بریک پوائنٹس کا استعمال کرتے ہیں ' ترچھے حصے ان کے استعمال کو عملی طور پر سمجھنے کے لیے کلاس:
< div کلاس = 'bg-slate-200 text-center text-lg md: اخترن-فرکشن' >3/4، 7/8، 5/4، 6/5
< / div >
مندرجہ بالا فراہم کردہ کوڈ میں، ایک div عنصر فراہم کیا گیا ہے ' md: اخترن فریکشنز 'کلاس جو عددی فریکشن کے فونٹ کو تبدیل کرے گی جب ' md 'بریک پوائنٹ تک پہنچ گیا ہے.
آؤٹ پٹ
جیسا کہ آپ آؤٹ پٹ میں دیکھ سکتے ہیں، فرکشنل نمبرز کو اخترن فریکشن فونٹ کے ساتھ فراہم کیا جاتا ہے جب ' md بریک پوائنٹ پہنچ گیا ہے:
ٹیل ونڈ اسٹیٹس کے ساتھ ڈائیگنل فریکشن کلاس کا استعمال
Tailwind ڈیفالٹ فراہم کرتا ہے ' ریاستوں کسی عنصر کو ڈیزائن کی خصوصیات فراہم کرنے کے لیے جب اس مخصوص حالت کو متحرک کیا جاتا ہے۔ یہ ڈیزائن کی ترتیب کو زیادہ دلکش اور متحرک بناتا ہے۔ Tailwind میں کسی حالت کے ساتھ 'اختیار-فرکشن' کلاس کو استعمال کرنے کے لیے، درج ذیل نحو استعمال کیا جاتا ہے:
{ حالت } : ترچھا حصہTailwind کی فراہم کردہ ڈیفالٹ حالت درج ذیل ہے:
- ہوور: جب صارف کرسر کو عنصر پر گھماتا ہے۔
- فوکس: جب صارف کسی عنصر پر نیویگیٹ کرکے اس پر فوکس کرتا ہے۔
- فعال: جب صارف کسی عنصر پر کلک کرکے ایکٹیویٹ کرتا ہے۔
- غیر فعال کریں: جب صارف کو کسی عنصر کو چالو کرنے کی اجازت نہیں ہوتی ہے۔
ذیل کا مظاہرہ استعمال کرنے کی ایک عملی مثال فراہم کرتا ہے ' اخترن فریکشن 'کے ساتھ کلاس' ہوور Tailwin میں ریاست:
< div کلاس = 'bg-slate-200 text-center text-lg hover: اخترن-فرکشن' >3/4، 7/8، 5/4، 6/5
< / div >
' div مندرجہ بالا کوڈ میں عنصر ایک کے ذریعہ فراہم کیا گیا ہے۔ ہوور: اخترن-فرکشن ' کلاس جو فریکشن نمبرز کے عام فونٹ کو اخترن فریکشن فونٹ میں بدل دے گی۔
آؤٹ پٹ
جیسا کہ آپ آؤٹ پٹ میں دیکھ سکتے ہیں، کسر نمبر کا عددی فونٹ بدل جاتا ہے کیونکہ صارف اس پر ماؤس کرسر کو گھماتا ہے:
یہ سب Tailwind CSS میں اخترن فریکشن کلاس کو استعمال کرنے کے بارے میں ہے۔
نتیجہ
Tailwind CSS میں اخترن فریکشن استعمال کرنے کے لیے، ' ترچھا حصہ 'کلاس. یہ کلاس عدد اور ڈینومینیٹر کو سلیش کے ساتھ الگ کر کے انہیں چھوٹا کر دے گی۔ صارف ڈیزائن کو مزید متحرک بنانے کے لیے ٹیل وِنڈ میں ڈیفالٹ بریک پوائنٹس اور اسٹیٹس کے ساتھ 'ڈیگنل فریکشنز' کلاس بھی استعمال کر سکتے ہیں۔ اس مضمون نے ٹیل ونڈ میں ترچھے حصوں کو استعمال کرنے کا طریقہ کار فراہم کیا ہے۔