ستوفر هذه المقالة الإجراء الخاص بتعيين صورة نمط القائمة لكتلة القائمة في Tailwind.
كيفية تعيين فئة صورة نمط القائمة في Tailwind؟
يتم استخدام فئة صورة نمط القائمة لتوفير صورة كعلامة قائمة في Tailwind. بشكل افتراضي، يوفر Tailwind فقط ' قائمة الصورة لا شيء ' فئة لا يمكن استخدامها إلا لإزالة أي علامة صورة تم تعيينها مسبقًا لقائمة.
بناء الجملة
بناء جملة استخدام فئة صورة نمط القائمة في Tailwind هو كما يلي:
< ماي فصل = 'list-image-[url({Image Url})]' > < / ماي >
يوفر بناء الجملة هذا الصورة المحددة كعلامة لعنصر القائمة.
< ماي فصل = 'قائمة الصورة لا شيء' > < / ماي >
يقوم بناء الجملة هذا بإزالة أي صور تم تعيينها مسبقًا كعلامة لعنصر القائمة.
دعونا نستخدم بناء الجملة المحدد أعلاه لاستخدام صورة كعلامة في قائمة غير مرتبة. في هذا العرض التوضيحي، لدى المستخدم صورة اسمها ' مؤشر اليد.png 'موجود داخل نفس مجلد مشروع Tailwind. في حالة وجود الصورة في مجلد آخر، يجب على المستخدم توفير المسار الكامل لفئة صورة نمط القائمة. سوف نستخدم تلك الصورة كعلامة قائمة باستخدام فئة 'صورة القائمة'.
< شعبة فصل = 'مركز التبرير المرن' >
< ماي فصل = 'صورة القائمة الداخلية-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
قائمة العينات
< الذي - التي >هذا هو العنصر الأول< / الذي - التي >
< الذي - التي >هذا هو العنصر الثاني< / الذي - التي >
< الذي - التي >هذا هو العنصر الثالث< / الذي - التي >
< / ماي >
< / شعبة >
شرح الكود أعلاه هو كما يلي:
- أ ' <ديف> يتم إنشاء العنصر وتزويده بالعنصر ' ثني ' فئة تقوم بمحاذاة العناصر أفقيًا في الحاوية.
- ال ' تبرير المركز 'تقوم الفئة بمحاذاة العناصر الفرعية إلى وسط الحاوية.
- التالي '
- ويتم توفير ' القائمة بالداخل ' فئة من شأنها أن تضع علامة عنصر القائمة المحدد داخل كتلة القائمة.
- ال ' قائمة الصورة-[url({Image Url})] 'يتم استخدام الفئة لتوفير صورة كعلامة لعنصر القائمة للعنصر.
- ال ' مسافة-ص-{رقم} 'توفر الفئة المسافة الرأسية بين عناصر القائمة.
- ال ' مدور-MD 'الطبقة تجعل زوايا كتلة القائمة مستديرة.
- ال ' ب ج-{اللون}-{رقم} 'يتم استخدام الفئة لتوفير لون الخلفية لكتلة القائمة.
- ال ' ص-2 توفر الفئة 'الحدود لعنصر القائمة.
- يتم إنشاء ثلاثة عناصر قائمة باستخدام ' <ذلك> العلامات.
انتاج:
يمكن أن نرى في الإخراج أنه تم تعيين صورة مؤشر اليد كعلامة لعناصر القائمة:
استخدام متغيرات الحالة مع فئة صور نمط القائمة في Tailwind
يوفر Tailwind متغيرات حالة مختلفة مثل التمرير والتركيز والنشاط مما يساعد في إنشاء تصميمات تفاعلية. لاستخدام فئة صورة بنمط القائمة مع هذه الحالات، يتم استخدام الصيغة التالية:
< ماي فصل = '{state}:list-image-{none OR image url}' > < / ماي >دعونا نستخدم بناء الجملة المحدد أعلاه لاستخدام خاصية الصورة بنمط القائمة مع ' يحوم 'الدولة في Tailwind. في هذا العرض التوضيحي، سيتم تزويد القائمة بصورة كعلامة للقائمة. ومع ذلك، باستخدام ' يحوم '، ستتم إزالة الصورة.
< شعبة فصل = 'مركز التبرير المرن' >< ماي فصل = 'list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
قائمة العينات
< الذي - التي >هذا هو العنصر الأول< / الذي - التي >
< الذي - التي >هذا هو العنصر الثاني< / الذي - التي >
< الذي - التي >هذا هو العنصر الثالث< / الذي - التي >
< / ماي >
< / شعبة >
في الكود أعلاه ' تحوم: قائمة الصورة لا شيء 'تزيل الفئة الصورة التي تم تعيينها مسبقًا كعلامة قائمة.
انتاج:
في الإخراج أدناه، تتم إعادة تعيين صورة نمط القائمة إلى ' لا أحد 'عندما يقوم المستخدم بتمرير مؤشر الماوس فوقه. ونتيجة لذلك، تمت إزالة الصورة التي تم استخدامها كعلامة للقائمة.
استخدام نقاط التوقف مع فئة صورة نمط القائمة في Tailwind
نقاط التوقف هي استعلامات وسائط محددة مسبقًا للعناصر الموجودة في Tailwind. يتم استخدامها لجعل التصميم مستجيبًا لأحجام الشاشات المختلفة. تتضمن نقاط التوقف هذه sm وmd وlg وxl و2xl. لاستخدام فئة صورة بنمط القائمة مع نقطة توقف، يتم استخدام بناء الجملة التالي:
< ماي فصل = '{نقطة التوقف}:list-image-{none OR image url}' > < / ماي >دعونا نستخدم بناء الجملة المحدد أعلاه لتغيير علامة القائمة من ' صورة ' ل ' لا أحد 'باستخدام نقطة توقف. في هذا المثال، ستتم إزالة علامة الصورة بمجرد أن يزيد حجم الشاشة من عرض ' دكتور في الطب 'نقطة توقف:
< شعبة فصل = 'مركز التبرير المرن' >< ماي فصل = 'list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
قائمة العينات
< الذي - التي >هذا هو العنصر الأول< / الذي - التي >
< الذي - التي >هذا هو العنصر الثاني< / الذي - التي >
< الذي - التي >هذا هو العنصر الثالث< / الذي - التي >
< / ماي >
< / شعبة >
في الكود أعلاه ' md:list-image-none 'تزيل الفئة علامة قائمة الصور عندما يصل حجم الشاشة إلى' دكتور في الطب 'نقطة توقف.
انتاج:
في الإخراج أدناه، تتم إزالة علامة الصورة عندما يصل حجم الشاشة إلى نقطة التوقف md:
يتعلق الأمر كله بتعيين صورة نمط القائمة في Tailwind.
خاتمة
يحتوي Tailwind على فئتين من صور نمط القائمة المحددة مسبقًا لإزالة أو تعيين علامة القائمة لعنصر ما على الصورة. ال ' قائمة الصورة-[url({Image Url})] 'توفر الفئة الصورة المحددة كعلامة قائمة. ال ' قائمة الصورة لا شيء 'تزيل الفئة أي صورة تم توفيرها مسبقًا كعلامة قائمة. قدمت هذه المقالة الإجراء الخاص بتعيين نوع نمط القائمة في Tailwind.