ما هو نوع نمط القائمة وكيفية استخدامه في Tailwind؟

ستوضح هذه المقالة:

• ما هو نوع نمط القائمة في Tailwind CSS؟
• كيفية استخدام نوع نمط القائمة في Tailwind CSS؟

ما هو نوع نمط القائمة في Tailwind CSS؟

نوع نمط القائمة هو خاصية CSS تُستخدم لتخصيص مظهر علامات عناصر القائمة في القوائم المرتبة

والقوائم غير المرتبة
. يحدد نوع التعداد النقطي أو نمط الترقيم الذي سيتم استخدامه لعناصر القائمة.

---





---






يحتوي نوع نمط القائمة على ثلاث فئات ، مثل:





قائمة القرص

يقوم بتعيين خاصية 'list-style-type' على القرص ، والتي تعرض دائرة مملوءة كعلامة للقوائم غير المرتبة '

'




قائمة عشرية

يقوم بتعيين خاصية 'نوع نمط القائمة' إلى القيمة العشرية ، والتي تُظهر القيم العشرية الرقمية (1 ، 2 ، 3 ، إلخ) كعلامات للقوائم المرتبة '

'.

---





---

قائمة لا شيء

يقوم بتعيين خاصية 'نوع نمط القائمة' على لا شيء ، مما يعني عدم عرض علامة لعناصر القائمة.

كيفية استخدام نوع نمط القائمة في Tailwind CSS؟

لاستخدام نوع نمط القائمة في Tailwind CSS ، عليك أولاً إنشاء برنامج HTML واستخدام عناصر القائمة فيه من خلال تحديد ' قائمة القرص ' و ' قائمة عشرية ' خدمات. بعد ذلك ، قم بتشغيل برنامج HTML واعرض الإخراج للتحقق:





الخطوة 1: إنشاء صفحة ويب HTML باستخدام عناصر القائمة

أولاً ، قم بإنشاء برنامج HTML واستخدم عناصر القائمة فيه باستخدام الأدوات المساعدة 'list-disc' و 'list-decimal'. على سبيل المثال ، استخدمنا العناصر التالية:

< جسم >

< شعبة فصل = 'h-screen ml-10' >

< ماي فصل = 'قرص قائمة' >

< الذي - التي > عنصر القائمة 1 < / الذي - التي >

< الذي - التي > عنصر القائمة 2 < / الذي - التي >

< الذي - التي > عنصر القائمة 3 < / الذي - التي >

< / ماي >

< ر >

< رأ فصل = 'قائمة عشرية' >

< الذي - التي > عنصر القائمة 1 < / الذي - التي >

< الذي - التي > عنصر القائمة 2 < / الذي - التي >

< الذي - التي > عنصر القائمة 3 < / الذي - التي >

< / رأ >

< ر >

< ماي >

< الذي - التي > عنصر القائمة 1 < / الذي - التي >

< الذي - التي > عنصر القائمة 2 < / الذي - التي >

< الذي - التي > عنصر القائمة 3 < / الذي - التي >

< / ماي >

< / شعبة >

< / جسم >

هنا،

• الأول، '
  تم تطبيق فئة 'list-disc' التي تعرض علامات الدوائر المملوءة لكل عنصر قائمة.
  • الثاني، '
    تم تطبيق فئة 'list-decimal' التي تعرض القيم العشرية الرقمية كعلامات.
    1. الاخير '
       'لا يحتوي على أي فئة أدوات مساعدة مطبقة ، لذلك سيستخدم نمط علامة القائمة الافتراضي.

       الخطوة 2: عرض صفحة ويب HTML

       بعد ذلك ، قم بتشغيل برنامج HTML واعرض صفحة الويب للتحقق من المخرجات:

       

       يعرض الإخراج أعلاه القوائم التي تم تصميمها وفقًا لها.

       خاتمة

       نوع نمط القائمة هو خاصية CSS تُستخدم لتخصيص مظهر علامات عناصر القائمة في القوائم المرتبة وغير المرتبة. يحدد نوع التعداد النقطي أو نمط الترقيم الذي سيتم استخدامه لعناصر القائمة. يمكن استخدامه في Tailwind بتحديد ' قائمة القرص ' و ' قائمة عشرية ' خدمات. توضح هذه المقالة نوع نمط القائمة واستخدامه في Tailwind.