ومع ذلك، ستتناول هذه المقالة فئتين محددتين هما الأرقام المتناسبة والأرقام الجدولية. يتم استخدامها لتصميم القيم الرقمية في Tailwind وترتيب البيانات الرقمية وتمثيلها بطريقة جذابة لتصميم المستند.
ستتناول هذه المقالة بالتفصيل الأشكال المتناسبة والجدولية في Tailwind CSS باستخدام المخطط التفصيلي التالي:
- كيفية استخدام الأرقام التناسبية في Tailwind CSS؟
- كيفية استخدام الأشكال الجدولية في Tailwind CSS؟
- الفرق بين الأرقام المتناسبة والجدولية
كيفية استخدام الأرقام التناسبية في Tailwind CSS؟
ستقوم فئة الأرقام المتناسبة بتعيين اصطلاح للعنصر حيث لا يكون لكل رقم نفس العرض.
بناء الجملة
بناء جملة استخدام الأرقام المتناسبة في Tailwind هو كما يلي:
< شعبة فصل = 'الأعداد المتناسبة' >
< شعبة / >
في بناء الجملة المذكور أعلاه، ' الأعداد النسبية 'يجب توفير فئة للعنصر لاستخدام الأرقام المتناسبة.
دعونا نرى مثالًا عمليًا للأشكال المتناسبة.
في الكود المتوفر أدناه، اثنان ' ص 'العناصر موجودة في' شعبة 'العنصر الذي يستخدم فئة الأرقام المتناسبة:
< شعبة فصل = 'تناسب-أرقام-مركز النص bg-slate-200 text-xl' >< ص > 121212 < / ص >
< ص > 838383 < / ص >
< / شعبة >
شرح الكود المذكور أعلاه هو كما يلي:
- ال ' شعبة يستخدم العنصر '' الأعداد النسبية 'الطبقة التي ستطبق خاصية الرقم المتناسب على الأرقام.
- ال ' مركز النص تضع الفئة النص في وسط العنصر.
- ال ' ب ج-{اللون}-{رقم} 'الطبقة مسؤولة عن لون خلفية العنصر.
- ال ' نص-XL 'توفر الفئة حجم خط كبير جدًا للنص.
- التالي اثنان” ص يتم إنشاء عناصر تحتوي على أرقام مختلفة.
انتاج |
ويمكن أن نرى في الإخراج أن الأرقام في الثانية ' ص 'العنصر له عرض أكبر قليلاً من العنصر الأول. ويرجع ذلك إلى فئة الأرقام المتناسبة:
كيفية استخدام الأشكال الجدولية في Tailwind CSS؟
تقوم الأشكال الجدولية في Tailwind بتعيين الاصطلاح لعنصر حيث يكون لكل رقم نفس حجم العرض. يؤدي هذا إلى إنشاء تمثيل متماثل للأرقام يشبه الجدول.
بناء الجملة
بناء الجملة لاستخدام الأشكال الجدولية هو كما يلي:
< شعبة فصل = 'الأرقام الجدولية' >< شعبة / >
في بناء الجملة المذكور أعلاه، ' أرقام جدولية يتم توفير فئة للعنصر لاستخدام الأشكال الجدولية.
دعونا نرى كيف ' أرقام جدولية ' تؤثر على القيم الرقمية في مستند HTML. لهذه المظاهرة، اثنان “ ص 'بقيم رقمية يتم إنشاؤها واحتواؤها في' شعبة 'العنصر الذي يستخدم فئة الأشكال الجدولية:
< شعبة فصل = 'جدول-أرقام-مركز النص bg-slate-200 text-xl' >< ص > 121212 < / ص >
< ص > 838383 < / ص >
< / شعبة >
في الكود أعلاه ' أرقام جدولية 'يتم توفير فئة إلى' شعبة 'العنصر الذي سيحدد نمط الأشكال الجدولية للطفل' ص ' عناصر.
انتاج:
يمكن أن نرى في الإخراج أعلاه أن القيم الرقمية في كلا العنصرين تتم محاذاتها بشكل مثالي بسبب نفس أحجام العرض للأرقام.
معلومات إضافية: الفرق بين الأرقام المتناسبة والجدولية في Tailwind CSS
دعونا نشاهد عرضًا توضيحيًا يميز بين تأثير فئات الأرقام الجدولية والمتناسبة على القيم الرقمية. في هذا العرض التوضيحي، سيتم تعيين العناصر في فئة الأرقام المتناسبة كافتراضي. بعد ذلك، باستخدام حالة التمرير، سيتم تخصيص فئة الأشكال الجدولية للعناصر:
< شعبة فصل = 'أرقام متناسبة في مركز النص bg-slate-200 text-xl تحوم: أرقام جدولية' >< ص > 121212 < / ص >
< ص > 838383 < / ص >
< / شعبة >
يمكن أن نرى في الكود أعلاه أن ' شعبة 'يتم توفير العنصر مع' الأعداد النسبية '، والذي سيكون الاصطلاح الافتراضي الذي ستتبعه القيم الرقمية.
وبالمثل، بسبب ' تحوم: أرقام جدولية '، فإن القيم الرقمية ستتبع اصطلاح الأشكال الجدولية عندما يقوم المستخدم بتمرير مؤشر الماوس فوق العنصر 'div'.
انتاج |
في المخرجات المحددة، يتغير عرض القيم الرقمية عندما يقوم المستخدم بتحريك الماوس فوق العنصر. يوفر هذا الفرق المرئي بين الأشكال المتناسبة والجدولية في Tailwind:
يتعلق الأمر كله بالأرقام المتناسبة والجدولية في Tailwind.
خاتمة
لاستخدام الأرقام المتناسبة في Tailwind، ' الأعداد النسبية يتم استخدام فئة '. تستخدم الأشكال المتناسبة التقليد حيث يكون لكل قيمة رقمية حجم عرض مختلف. لاستخدام الأشكال الجدولية في Tailwind، ' أرقام جدولية يتم استخدام فئة '. تستخدم الأشكال الجدولية التقليد حيث يكون لكل قيمة رقمية نفس حجم العرض. قدمت هذه المقالة الإجراء الخاص باستخدام الأرقام المتناسبة والجدولية في Tailwind.