تشرح هذه المقالة كيفية استخدام الكسور القطرية في Tailwind.
كيفية استخدام الكسور القطرية في Tailwind CSS؟
فئة الكسر القطري في Tailwind عبارة عن متغير خط رقمي محدد مسبقًا يجعل البسط والمقام أصغر ويفصل بينهما بشرطة مائلة. وهذا يجعل رقم الكسر يبدو مميزًا عن بقية النص.
بناء الجملة
بناء جملة استخدام ' الكسور القطرية 'الطبقة هي كما يلي:
< شعبة فصل = 'الكسور القطرية' >
< شعبة / >
كما ترون من بناء الجملة أعلاه، يجب على المطور توفير ' الكسور القطرية ' في ال ' فصل ' سمة العنصر.
دعونا نستخدم فئة 'الكسور القطرية' كمثال عملي. في العرض التوضيحي أدناه، يمكن للمستخدم رؤية الفرق بين الكسور العادية والكسور القطرية:
< شعبة فصل = 'bg-slate-200 text-center text-lg' >< ص > الكسور العادية: 3 / 5 6 / 3 6 / 5 < / ص >
< ص فصل = 'الكسور القطرية' >الكسور القطرية: 3 / 5 6 / 3 6 / 5 < / ص >
< / شعبة >
شرح الكود أعلاه هو كما يلي:
- ال ' شعبة يتم إنشاء العنصر وتوفيره كلون الخلفية باستخدام الزر ' ب ج-{اللون}-{رقم} ' فصل.
- بعد ذلك، يتم توفير النص بحجم خط كبير ويتم محاذاته إلى منتصف العنصر باستخدام الزر ' نص إل جي ' و ' مركز النص 'الفصول على التوالي.
- التالي اثنان” <ص> يتم إنشاء العناصر، حيث يتم تزويد العنصر الثاني بـ ' الكسور القطرية ' فصل.
انتاج:
يمكن رؤية الفرق بين الكسر القطري والكسر العادي بوضوح في الناتج أعلاه.
استخدام فئة الكسر القطري مع نقاط التوقف
يتم استخدام نقاط التوقف كاستعلامات الوسائط في Tailwind. هناك خمس نقاط توقف افتراضية مع الحد الأدنى المحدد للعرض. يمكن استخدام نقاط التوقف هذه مع أي فئة في Tailwind لإنشاء تخطيطات تصميم سريعة الاستجابة وديناميكية.
لاستخدام ال ' الكسور القطرية ' مع نقطة توقف في Tailwind، يتم استخدام بناء الجملة التالي:
{ بادئة نقطة التوقف } : جزء قطرييوفر الجدول أدناه الحد الأدنى للعرض لنقاط التوقف المختلفة في Tailwind:
| بادئة نقطة التوقف | الحد الأدنى للعرض |
|---|---|
| سم | 640 بكسل |
| دكتور في الطب | 768 بكسل |
| إل جي | 1024 بكسل |
| XL | 1280 بكسل |
| 2xl | 1536 بكسل |
دعونا نستخدم نقاط التوقف مع ' الكسور القطرية 'فئة لفهم استخدامها عمليًا:
< شعبة فصل = 'bg-slate-200 text-center text-lg md:الكسور القطرية' >3/4، 7/8، 5/4، 6/5
< / شعبة >
في الكود المذكور أعلاه، يتم توفير عنصر div في ' md:الكسور القطرية 'فئة من شأنها تغيير خط الكسور الرقمية عندما' دكتور في الطب 'تم الوصول إلى نقطة التوقف.
انتاج |
كما ترون في الإخراج، يتم توفير الأرقام الكسرية بخط الكسر القطري عندما يكون ' دكتور في الطب 'تم الوصول إلى نقطة التوقف:
استخدام فئة الكسر القطري مع حالات الرياح الخلفية
يوفر Tailwind الافتراضي ' تنص على 'من أجل توفير خصائص التصميم لعنصر عند تشغيل تلك الحالة المحددة. وهذا يجعل تخطيط التصميم أكثر جاذبية وديناميكية. من أجل استخدام فئة 'الكسور القطرية' مع الحالة في Tailwind، يتم استخدام بناء الجملة التالي:
{ ولاية } : جزء قطريالحالة الافتراضية التي توفرها Tailwind هي كما يلي:
- يحوم: عندما يقوم المستخدم بتحريك المؤشر فوق العنصر.
- ركز: عندما يركز المستخدم على عنصر ما بالانتقال إليه.
- نشيط: عندما يقوم المستخدم بتنشيط عنصر من خلال النقر عليه.
- إبطال: عندما لا يسمح للمستخدم بتنشيط عنصر ما.
يقدم العرض التوضيحي أدناه مثالاً عمليًا لاستخدام ' الكسور القطرية 'الفصل مع' يحوم 'الحالة في Tailwind:
< شعبة فصل = 'bg-slate-200 text-center text-lg hover: الكسور القطرية' >3/4، 7/8، 5/4، 6/5
< / شعبة >
ال ' شعبة يتم توفير عنصر 'في الكود أعلاه بواسطة' تحوم:الكسور القطرية ' فئة من شأنها تغيير الخط العادي لأرقام الكسر إلى خط الكسر القطري.
انتاج |
كما ترون في الإخراج، يتغير الخط الرقمي لرقم الكسر عندما يقوم المستخدم بتمرير مؤشر الماوس فوقه:
يتعلق الأمر كله باستخدام فئة الكسر القطري في Tailwind CSS.
خاتمة
لاستخدام الكسور القطرية في Tailwind CSS، استخدم ' جزء قطري ' فصل. ستفصل هذه الفئة البسط والمقام بشرطة مائلة وتجعلهما صغيرين. يمكن للمستخدمين أيضًا استخدام فئة 'الكسور القطرية' مع نقاط التوقف والحالات الافتراضية في Tailwind لجعل التصميم أكثر ديناميكية. قدمت هذه المقالة الإجراء الخاص باستخدام الكسور القطرية في Tailwind.