فرض کریں کہ صارف کو اپنے ویب پیج کے لیے آئٹمز کی فہرست بنانا ہوگی۔ ڈیزائننگ کے عمل کو آسان بنانے کے لیے، Tailwind مختلف فہرست طرز کی کلاسیں فراہم کرتا ہے جو فہرست کے عناصر کی قسم، پوزیشن اور سیدھ میں تبدیلی کے لیے استعمال کی جا سکتی ہیں۔
یہ مضمون Tailwind میں فہرست طرز کی قسم کو ترتیب دینے کا طریقہ کار فراہم کرے گا۔
Tailwind میں لسٹ اسٹائل کی قسم کیسے سیٹ کریں؟
Tailwind تین ڈیفالٹ فہرست طرز کی اقسام فراہم کرتا ہے۔ وہ فراہم کرنے کے لئے استعمال ہوتے ہیں ' مارکر فہرست اشیاء کے لئے طرز۔ تین ڈیفالٹ لسٹ سٹائل قسم کی کلاسز کو اس طرح بیان کیا گیا ہے:
- فہرست ڈسک: یہ کلاس فہرست مارکر کے طور پر گول گول پوائنٹس فراہم کرے گی۔
- فہرست اعشاریہ: یہ کلاس فہرست مارکر کے بطور اعشاریہ نمبر فراہم کرے گی۔
- فہرست-کوئی نہیں: یہ کلاس آئٹمز سے لسٹ مارکر کو ہٹا دے گی۔
فہرست طرز کی اقسام کو استعمال کرنے کا نحو درج ذیل ہے:
< ال کلاس = 'list-{style}' > < / ال >
بہتر تفہیم کے لیے، ذیل میں فراہم کردہ مظاہرے اوپر بیان کردہ نحو کو استعمال کریں گے تاکہ اشیاء کی فہرست میں مختلف مارکر طرزیں فراہم کی جا سکیں۔ اس مثال میں، تین فہرست عناصر بنائے جائیں گے اور Tailwind میں ڈیفالٹ لسٹ اسٹائل کلاسز کا استعمال کرتے ہوئے مختلف مارکر اسٹائلز کے ساتھ فراہم کیے جائیں گے:
< ص کلاس = 'متن-مرکز متن-xl فونٹ-بولڈ' > پہلے سے طے شدہ مختلف فہرست انداز Tailwind میں اقسام< / ص >
< بی آر >
< div کلاس = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ال کلاس = 'لسٹ ڈسک' >
فہرست # 1
< کہ یہ پہلی چیز ہے< / کہ >
< کہ یہ دوسرا آئٹم ہے< / کہ >
< کہ >یہ تیسرا آئٹم ہے< / کہ >
< / ال >
< ال کلاس = 'فہرست اعشاریہ' >
فہرست # 2
< کہ یہ پہلی چیز ہے< / کہ >
< کہ یہ دوسرا آئٹم ہے< / کہ >
< کہ >یہ تیسرا آئٹم ہے< / کہ >
< / ال >
< ال کلاس = 'لسٹ-کوئی نہیں' >
فہرست # 3
< کہ یہ پہلا آئٹم ہے< / کہ >
< کہ یہ دوسرا آئٹم ہے< / کہ >
< کہ >یہ تیسرا آئٹم ہے< / کہ >
< / ال >
< / div >
مندرجہ بالا کوڈ کی وضاحت اس طرح ہے:
- ایک ' 'عنصر ایک کے ساتھ بنایا گیا ہے' xl 'فونٹ سائز اور ایک' بولڈ فونٹ کا وزن۔ عنصر کا متنی مواد مرکز میں 'کا استعمال کرتے ہوئے رکھا گیا ہے۔ متن کا مرکز 'کلاس.
- لائن کے وقفے کے بعد، ' 'عنصر تخلیق کیا جاتا ہے اور اسے فراہم کیا جاتا ہے' فلیکس 'کلاس. یہ ایک کنٹینر بنائے گا جو بچوں کی اشیاء کو افقی طور پر سیدھ کر دے گا۔
- ' جواز فراہم کرنے والا مرکز 'کلاس اشیاء کو کنٹینر کے بیچ میں رکھے گی۔
- ' space-x-{size} کلاس اشیاء کے درمیان افقی جگہ فراہم کرتی ہے۔
- ' bg-{color}-{number} کلاس کنٹینر کے پس منظر کو مخصوص رنگ پر سیٹ کرتی ہے۔
- ' گول-ایل جی کلاس کنٹینر کے کونوں کو گول بنا دیتی ہے۔
- ' mx-4 کلاس فلیکس کنٹینر کو افقی مارجن فراہم کرتی ہے۔
- ' p-2 کلاس فلیکس کنٹینر کو پیڈنگ فراہم کرتی ہے۔
- اس کے بعد، فہرست کے تین عناصر بنائے جاتے ہیں اور مختلف فہرست طرز کی اقسام کے ساتھ فراہم کیے جاتے ہیں۔ فہرست-{قسم} 'کلاس.
آؤٹ پٹ:
مندرجہ ذیل آؤٹ پٹ سے، یہ دیکھا جا سکتا ہے کہ پہلی فہرست میں بلٹ پوائنٹس کا استعمال کیا گیا ہے، دوسری فہرست میں اعشاریہ نمبر استعمال کیے گئے ہیں، اور تیسری فہرست میں کوئی آئٹم مارکر استعمال نہیں کیا گیا ہے۔
ٹیل ونڈ میں اسٹیٹ ویریئنٹس کے ساتھ لسٹ اسٹائل کلاس کا استعمال
لسٹ اسٹائل کلاس کو ٹیل ونڈ میں ڈیفالٹ اسٹیٹ ویریئنٹس کے ساتھ ڈیزائن کو مزید متحرک بنانے کے لیے استعمال کیا جا سکتا ہے۔ ہوور، فوکس، اور فعال حالت کی مختلف حالتوں کا استعمال کرتے ہوئے، صارف فہرست آئٹمز کے مارکر اسٹائل کو تبدیل کر سکتا ہے جب بھی مخصوص حالت کو متحرک کیا جاتا ہے۔ ریاست کی مختلف حالتوں کے ساتھ فہرست طرز کی کلاس کو استعمال کرنے کا نحو درج ذیل ہے:
< ال کلاس = '{state}:list-{style}...' > < / ال >یہاں 'ہور' حالت کے ساتھ فہرست طرز کی قسم کو استعمال کرنے کی ایک مثال ہے، جہاں صارف لسٹ بلاک پر ہوور کر کے مارکر کے انداز کو تبدیل کر سکتا ہے:
< ص کلاس = 'متن-مرکز متن-xl فونٹ-بولڈ' >مارکر کے انداز کو تبدیل کرنے کے لیے کرسر کو لسٹ بلاک پر ہوور کریں۔ / ص >
< بی آر >
< div کلاس = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ال کلاس = 'لسٹ ڈسک ہوور: فہرست اعشاریہ' >
فہرست # 1
< کہ یہ پہلی چیز ہے< / کہ >
< کہ یہ دوسرا آئٹم ہے< / کہ >
< کہ >یہ تیسرا آئٹم ہے< / کہ >
< / ال >
< / div >مندرجہ بالا کوڈ میں، فہرست فراہم کی گئی ہے ' فہرست ڈسک 'کلاس بطور ڈیفالٹ لسٹ اسٹائل ٹائپ۔ تاہم، استعمال کرتے ہوئے ' hover:list-decimal ”کلاس، فہرست کی طرز کی قسم تب تبدیل ہو جائے گی جب صارف ماؤس کرسر کو لسٹ بلاک پر گھماتا ہے۔
آؤٹ پٹ:
نیچے دی گئی آؤٹ پٹ سے پتہ چلتا ہے کہ جب کرسر لسٹ بلاک پر گھومتا ہے تو فہرست کی قسم کا انداز گولیوں والی فہرست سے نمبر والی فہرست میں بدل جاتا ہے۔
ٹیل ونڈ میں بریک پوائنٹس کے ساتھ لسٹ اسٹائل کلاس کا استعمال
بریک پوائنٹس مختلف اسکرین سائز کے لے آؤٹ کی جوابی ڈیزائننگ کے لیے استعمال کیے جاتے ہیں۔ Tailwind کی طرف سے فراہم کردہ پانچ ڈیفالٹ بریک پوائنٹس ہیں sm, md, lg, xl, اور 2xl۔ درج ذیل نحو کو بریک پوائنٹ کے ساتھ لسٹ ٹائپ اسٹائل کلاس فراہم کرنے کے لیے استعمال کیا جاتا ہے۔
< ال کلاس = '{breakpoint}:list-{style}...' > < / ال >یہاں فہرست طرز کی قسم کو استعمال کرنے کی ایک مثال ہے ' md بریک پوائنٹ، جہاں اسکرین کا سائز 'md' بریک پوائنٹ تک پہنچنے پر مارکر کا انداز بدل جائے گا:
< ص کلاس = 'متن-مرکز متن-xl فونٹ-بولڈ' > اسکرین میں اضافہ کریں۔ سائز مارکر کے انداز کو تبدیل کرنے کے لیے< / ص >
< بی آر >
< div کلاس = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ال کلاس = 'list-disc md:list-decimal' >
فہرست # 1
< کہ یہ پہلی چیز ہے< / کہ >
< کہ یہ دوسرا آئٹم ہے< / کہ >
< کہ >یہ تیسرا آئٹم ہے< / کہ >
< / ال >
< / div >مندرجہ بالا کوڈ میں، فہرست فراہم کی گئی ہے ' فہرست ڈسک 'کلاس بطور ڈیفالٹ اسٹائل۔ تاہم، استعمال کرتے ہوئے ' md:list-decimal 'کلاس فہرست طرز کی قسم 'md' اسکرین کے سائز کے لیے بدل جائے گی۔
آؤٹ پٹ:
جیسا کہ آپ نیچے دیے گئے آؤٹ پٹ میں دیکھ سکتے ہیں، جب اسکرین کا سائز '' تک پہنچ جاتا ہے تو فہرست طرز کی قسم ڈسک سے اعشاریہ میں بدل جاتی ہے۔ md 'بریک پوائنٹ۔
یہ سب Tailwind میں فہرست طرز کی قسم کو ترتیب دینے کے بارے میں ہے۔
نتیجہ
ٹیل ونڈ کسی عنصر کی فہرست سازی کے انداز کو تبدیل کرنے کے لیے تین پہلے سے طے شدہ فہرست طرز کی کلاسیں فراہم کرتا ہے۔ ' فہرست ڈسک کلاس اشیاء کی فہرست کے لیے بلٹ پوائنٹس فراہم کرتی ہے۔ ' فہرست اعشاریہ کلاس اشیاء کی فہرست کے لیے نمبر فراہم کرتی ہے۔ ' فہرست-کوئی نہیں۔ کلاس ایک فہرست بناتی ہے جو کسی بھی آئٹم مارکر کا استعمال نہیں کرتی ہے۔ اس مضمون نے Tailwind میں فہرست طرز کی قسم کو ترتیب دینے کا طریقہ کار فراہم کیا ہے۔