تاہم، یہ مضمون دو مخصوص طبقوں کی وضاحت کرے گا جو متناسب اعداد و شمار اور ٹیبلر اعداد ہیں۔ ان کا استعمال ٹیل ونڈ میں عددی اقدار کو اسٹائل کرنے اور عددی ڈیٹا کو اس طرح ترتیب دینے اور اس کی نمائندگی کرنے کے لیے کیا جاتا ہے جو دستاویز کے ڈیزائن کو دلکش ہو۔
یہ مضمون درج ذیل خاکہ کا استعمال کرتے ہوئے Tailwind CSS میں متناسب اور ٹیبلر اعداد و شمار کی وضاحت کرے گا:
- Tailwind CSS میں متناسب اعداد و شمار کا استعمال کیسے کریں؟
- Tailwind CSS میں ٹیبلر فگرز کا استعمال کیسے کریں؟
- متناسب اور ٹیبلر اعداد و شمار کے درمیان فرق
Tailwind CSS میں متناسب اعداد و شمار کا استعمال کیسے کریں؟
متناسب اعداد و شمار کی کلاس عنصر کو ایک کنونشن تفویض کرے گی جہاں ہر نمبر کی چوڑائی یکساں نہیں ہوتی ہے۔
نحو
ٹیل ونڈ میں متناسب اعداد و شمار کو استعمال کرنے کا نحو درج ذیل ہے:
< div کلاس = 'متناسب نمبر' >
< div / >
اوپر فراہم کردہ نحو میں، ' متناسب نمبر متناسب اعداد و شمار کو استعمال کرنے کے لیے عنصر کو کلاس فراہم کرنا ہوگا۔
آئیے متناسب اعداد و شمار کی ایک عملی مثال دیکھتے ہیں۔
ذیل میں فراہم کردہ کوڈ میں، دو ' ص عناصر ایک میں موجود ہیں div ' عنصر جو متناسب اعداد و شمار کی کلاس کا استعمال کرتا ہے:
< div کلاس = متناسب نمبر ٹیکسٹ سینٹر bg-slate-200 text-xl >< ص > 121212 < / ص >
< ص > 838383 < / ص >
< / div >
مندرجہ بالا فراہم کردہ کوڈ کی وضاحت اس طرح ہے:
- ' div 'عنصر استعمال کرتا ہے' متناسب نمبر ' وہ کلاس جو اعداد پر متناسب اعداد کی خاصیت کا اطلاق کرے گی۔
- ' متن کا مرکز کلاس متن کو عنصر کے بیچ میں رکھتی ہے۔
- ' bg-{color}-{number} 'کلاس عنصر کے پس منظر کے رنگ کے لئے ذمہ دار ہے۔
- ' text-xl کلاس متن کے لیے ایک اضافی بڑے فونٹ سائز فراہم کرتی ہے۔
- اگلا، دو' ص عناصر مختلف نمبروں پر مشتمل ہوتے ہیں۔
آؤٹ پٹ
یہ آؤٹ پٹ میں دیکھا جا سکتا ہے کہ دوسرے نمبر میں ' ص عنصر کی چوڑائی پہلے والی سے تھوڑی بڑی ہے۔ یہ متناسب اعداد و شمار کی کلاس کی وجہ سے ہے:
Tailwind CSS میں ٹیبلر فگرز کا استعمال کیسے کریں؟
Tailwind میں ٹیبلر اعداد و شمار کنونشن کو ایک عنصر کے لیے تفویض کرتے ہیں جہاں ہر نمبر کی چوڑائی کا سائز یکساں ہوتا ہے۔ یہ اعداد کی میز کی طرح کی نمائندگی کرتا ہے۔
نحو
ٹیبلر اعداد و شمار کو استعمال کرنے کے لئے نحو مندرجہ ذیل ہے:
< div کلاس = 'ٹیبل نمبر' >< div / >
اوپر فراہم کردہ نحو میں، ' ٹیبلر نمبر ٹیبلر فگرز استعمال کرنے کے لیے عنصر کو کلاس فراہم کی جاتی ہے۔
آئیے دیکھتے ہیں کہ کیسے ' ٹیبلر نمبر HTML دستاویز میں عددی اقدار کو متاثر کرتا ہے۔ اس مظاہرے کے لیے، دو ' ص 'عددی اقدار کے ساتھ بنائے جاتے ہیں اور ایک' میں موجود ہوتے ہیں div عنصر جو ٹیبلر فگر کلاس استعمال کرتا ہے:
< div کلاس = 'ٹیبلر-نمز ٹیکسٹ سینٹر bg-slate-200 text-xl' >< ص > 121212 < / ص >
< ص > 838383 < / ص >
< / div >
مندرجہ بالا کوڈ میں، ' ٹیبلر نمبر 'کلاس فراہم کی جاتی ہے' div 'عنصر جو بچے کو ٹیبلر اعداد و شمار کا انداز تفویض کرے گا' ص ' عناصر.
آؤٹ پٹ:
مندرجہ بالا آؤٹ پٹ میں دیکھا جا سکتا ہے کہ ہندسوں کی ایک ہی چوڑائی کے سائز کی وجہ سے دونوں عناصر میں عددی قدریں بالکل سیدھ میں ہیں۔
بونس کی معلومات: Tailwind CSS میں متناسب اور ٹیبلر اعداد و شمار کے درمیان فرق
آئیے ایک ایسا مظاہرہ دیکھتے ہیں جو عددی اقدار پر ٹیبلر اور متناسب اعداد کی کلاسوں کے اثر کو مختلف کرتا ہے۔ اس مظاہرے میں، عناصر کو متناسب اعداد کی کلاس بطور ڈیفالٹ تفویض کی جائے گی۔ اگلا، ہوور سٹیٹ کا استعمال کرتے ہوئے، عناصر کو ٹیبلر فگر کلاس تفویض کیا جائے گا:
< div کلاس = متناسب نمبر ٹیکسٹ سینٹر bg-slate-200 text-xl hover:tabular-nums >< ص > 121212 < / ص >
< ص > 838383 < / ص >
< / div >
مندرجہ بالا کوڈ میں دیکھا جا سکتا ہے کہ ' div 'عنصر فراہم کیا جاتا ہے' متناسب نمبر ”، جو ڈیفالٹ کنونشن ہو گا جس کی عددی قدریں پیروی کریں گی۔
اسی طرح، کی وجہ سے ' hover:ٹیبلولر نمبر ” کلاس میں، عددی اقدار ٹیبلر فگرز کنونشن کی پیروی کریں گی جب بھی صارف ماؤس کرسر کو 'div' عنصر پر گھماتا ہے۔
آؤٹ پٹ
دیے گئے آؤٹ پٹ میں، عددی قدروں کی چوڑائی تب بدل جاتی ہے جب صارف عنصر پر ماؤس کو گھماتا ہے۔ یہ Tailwind میں متناسب اور ٹیبلر اعداد و شمار کے درمیان بصری فرق فراہم کرتا ہے:
یہ سب ٹیل ونڈ میں متناسب اور ٹیبلر اعداد و شمار کے بارے میں ہے۔
نتیجہ
Tailwind میں متناسب اعداد و شمار استعمال کرنے کے لیے، ' متناسب نمبر کلاس استعمال کیا جاتا ہے۔ متناسب اعداد و شمار کنونشن کا استعمال کرتے ہیں جہاں ہر عددی قدر کی چوڑائی کا سائز مختلف ہوتا ہے۔ Tailwind میں ٹیبلر اعداد و شمار کو استعمال کرنے کے لیے، ' ٹیبلر نمبر کلاس استعمال کیا جاتا ہے۔ ٹیبلر اعداد و شمار کنونشن کا استعمال کرتے ہیں جہاں ہر عددی قدر کی چوڑائی کا سائز ایک ہی ہوتا ہے۔ اس مضمون نے ٹیل ونڈ میں متناسب اور ٹیبلر اعداد و شمار کو استعمال کرنے کا طریقہ کار فراہم کیا ہے۔