یہ مضمون Tailwind میں فہرست بلاک کی فہرست طرز کی تصویر ترتیب دینے کا طریقہ کار فراہم کرے گا۔
Tailwind میں لسٹ اسٹائل امیج کلاس کیسے سیٹ کریں؟
لسٹ اسٹائل امیج کلاس کو ٹیل ونڈ میں لسٹ مارکر کے طور پر تصویر فراہم کرنے کے لیے استعمال کیا جاتا ہے۔ پہلے سے طے شدہ طور پر، Tailwind صرف ' فہرست-تصویر-کوئی نہیں۔ ' کلاس جو صرف فہرست کے لیے پہلے سے سیٹ کردہ تصویری مارکر کو ہٹانے کے لیے استعمال کی جا سکتی ہے۔
نحو
ٹیل ونڈ میں لسٹ اسٹائل امیج کلاس استعمال کرنے کا نحو درج ذیل ہے:
< ال کلاس = 'list-image-[url({Image Url})]' > < / ال >
یہ نحو فہرست کے عنصر کے مارکر کے طور پر مخصوص تصویر فراہم کرتا ہے۔
< ال کلاس = 'فہرست-تصویر-کوئی نہیں' > < / ال >
یہ نحو پہلے سے سیٹ کردہ کسی بھی تصویر کو فہرست کے عنصر کے مارکر کے طور پر ہٹا دیتا ہے۔
آئیے بغیر ترتیب والی فہرست میں کسی تصویر کو بطور مارکر استعمال کرنے کے لیے اوپر بیان کردہ نحو کا استعمال کریں۔ اس مظاہرے میں، صارف کے پاس ایک تصویر ہے جس کا نام ہے ' handpointer.png اسی Tailwind پروجیکٹ فولڈر کے اندر موجود ہے۔ اگر تصویر کسی دوسرے فولڈر میں موجود ہے تو، صارف کو فہرست سٹائل امیج کلاس کا پورا راستہ فراہم کرنا ہوگا۔ ہم 'لسٹ امیج' کلاس کا استعمال کرتے ہوئے اس تصویر کو لسٹ مارکر کے طور پر استعمال کریں گے۔
< div کلاس = 'فلیکس جواز فراہم کرنے والا مرکز' >
< ال کلاس = 'list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
نمونہ کی فہرست
< کہ یہ پہلی چیز ہے< / کہ >
< کہ یہ دوسرا آئٹم ہے< / کہ >
< کہ >یہ تیسرا آئٹم ہے< / کہ >
< / ال >
< / div >
مندرجہ بالا کوڈ کی وضاحت اس طرح ہے:
- ایک ' 'عنصر تخلیق کیا جاتا ہے اور اس کے ساتھ فراہم کیا جاتا ہے' فلیکس ' کلاس جو ایک کنٹینر میں اشیاء کو افقی طور پر سیدھ کرتی ہے۔
- ' جواز فراہم کرنے والا مرکز ” کلاس چائلڈ آئٹمز کو کنٹینر کے بیچ میں سیدھ میں کرتی ہے۔
- اگلا، '
- یہ فراہم کیا جاتا ہے ' فہرست کے اندر کلاس جو مخصوص فہرست آئٹم مارکر کو فہرست بلاک کے اندر رکھے گی۔
- ' list-image-[url({Image Url})] 'کلاس عنصر کو فہرست آئٹم مارکر کے طور پر تصویر فراہم کرنے کے لیے استعمال کیا جاتا ہے۔
- ' space-y-{number} کلاس فہرست اشیاء کے درمیان عمودی جگہ فراہم کرتی ہے۔
- ' rounded-md کلاس فہرست بلاک کے کونوں کو گول کر دیتی ہے۔
- ' bg-{color}-{number} ” کلاس کا استعمال لسٹ بلاک کو پس منظر کا رنگ فراہم کرنے کے لیے کیا جاتا ہے۔
- ' p-2 کلاس فہرست عنصر کو بارڈر فراہم کرتی ہے۔
- تین فہرست آئٹمز 'کا استعمال کرتے ہوئے بنائے جاتے ہیں <وہ> ٹیگز
آؤٹ پٹ:
آؤٹ پٹ میں دیکھا جا سکتا ہے کہ ایک ہینڈ پوائنٹر امیج کو فہرست آئٹمز کے لیے مارکر کے طور پر سیٹ کیا گیا ہے۔
Tailwind میں فہرست طرز تصویری کلاس کے ساتھ ریاستی متغیرات کا استعمال
ٹیل ونڈ مختلف ریاستی شکلیں فراہم کرتا ہے جیسے ہوور، فوکس اور ایکٹو جو انٹرایکٹو ڈیزائن بنانے میں مدد کرتا ہے۔ ان ریاستوں کے ساتھ فہرست طرز کی تصویری کلاس استعمال کرنے کے لیے، درج ذیل نحو استعمال کیا جاتا ہے:
< ال کلاس = '{state}:list-image-{none OR image url}' > < / ال >آئیے فہرست طرز کی امیج پراپرٹی کو ' کے ساتھ استعمال کرنے کے لیے اوپر بیان کردہ نحو کا استعمال کریں۔ ہوور ٹیل ونڈ میں ریاست۔ اس مظاہرے میں، فہرست کو فہرست مارکر کے طور پر ایک تصویر کے ساتھ فراہم کیا جائے گا۔ تاہم، استعمال کرتے ہوئے ' ہوور ریاست، تصویر ہٹا دی جائے گی۔
< div کلاس = 'فلیکس جواز فراہم کرنے والا مرکز' >
< ال کلاس = 'list-inside list-image-[url(handpointer.png)] ہوور:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
نمونہ کی فہرست
< کہ یہ پہلی چیز ہے< / کہ >
< کہ یہ دوسرا آئٹم ہے< / کہ >
< کہ >یہ تیسرا آئٹم ہے< / کہ >
< / ال >
< / div >مندرجہ بالا کوڈ میں، ' hover:list-image-none ” کلاس فہرست مارکر کے طور پر پہلے سے سیٹ کردہ تصویر کو ہٹا دیتی ہے۔
آؤٹ پٹ:
نیچے دیے گئے آؤٹ پٹ میں، فہرست طرز کی تصویر ری سیٹ ہو جاتی ہے ' کوئی نہیں جب صارف ماؤس کرسر کو اس پر گھماتا ہے۔ اس کی وجہ سے وہ تصویر جو لسٹ مارکر کے طور پر استعمال ہو رہی تھی ہٹا دی گئی۔
ٹیل ونڈ میں لسٹ اسٹائل امیج کلاس کے ساتھ بریک پوائنٹس کا استعمال
بریک پوائنٹس Tailwind میں عناصر کے لیے پہلے سے سیٹ میڈیا کے سوالات ہیں۔ ان کا استعمال مختلف اسکرین سائزز کے لیے ڈیزائن کو ذمہ دار بنانے کے لیے کیا جاتا ہے۔ ان بریک پوائنٹس میں sm, md, lg, xl اور 2xl شامل ہیں۔ بریک پوائنٹ کے ساتھ فہرست طرز کی تصویر کی کلاس استعمال کرنے کے لیے، درج ذیل نحو کا استعمال کیا جاتا ہے:
< ال کلاس = '{breakpoint}:list-image-{none OR image url}' > < / ال >آئیے فہرست مارکر کو ' سے تبدیل کرنے کے لیے اوپر بیان کردہ نحو کا استعمال کریں تصویر 'سے' کوئی نہیں بریک پوائنٹ کا استعمال کرتے ہوئے اس مثال میں، اسکرین کے سائز کی چوڑائی بڑھنے کے بعد تصویر مارکر ہٹا دیا جائے گا۔ md بریک پوائنٹ:
< div کلاس = 'فلیکس جواز فراہم کرنے والا مرکز' >
< ال کلاس = 'list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
نمونہ کی فہرست
< کہ یہ پہلی چیز ہے< / کہ >
< کہ یہ دوسرا آئٹم ہے< / کہ >
< کہ >یہ تیسرا آئٹم ہے< / کہ >
< / ال >
< / div >مندرجہ بالا کوڈ میں، ' md:list-image-none 'کلاس تصویر کی فہرست مارکر کو ہٹا دیتا ہے جب اسکرین کا سائز' تک پہنچ جاتا ہے md 'بریک پوائنٹ۔
آؤٹ پٹ:
نیچے دیے گئے آؤٹ پٹ میں، امیج مارکر کو ہٹا دیا جاتا ہے جب اسکرین کا سائز ایم ڈی بریک پوائنٹ تک پہنچ جاتا ہے:
یہ سب Tailwind میں فہرست طرز کی تصویر ترتیب دینے کے بارے میں ہے۔
نتیجہ
Tailwind میں ایک عنصر کے لسٹنگ مارکر کو تصویر میں ہٹانے یا سیٹ کرنے کے لیے پہلے سے طے شدہ فہرست طرز کی تصویری کلاسز ہیں۔ ' list-image-[url({Image Url})] کلاس فہرست مارکر کے بطور مخصوص تصویر فراہم کرتی ہے۔ ' فہرست-تصویر-کوئی نہیں۔ کلاس لسٹ مارکر کے بطور پہلے فراہم کردہ کسی بھی تصویر کو ہٹا دیتی ہے۔ اس مضمون نے Tailwind میں فہرست طرز کی قسم کو ترتیب دینے کا طریقہ کار فراہم کیا ہے۔