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

في هذا البرنامج التعليمي، سنستكشف كيفية تحقيق ذلك باستخدام Tailwind CSS، سواء من خلال الأنماط المضمنة أو من خلال نهج CSS العالمي.

المشكلة

افتراضيًا، تضيف المتصفحات أسهم الزيادة والتناقص إلى عناصر . على الرغم من أنها وظيفية، إلا أن هذه الأسهم غالبًا ما تتعارض مع التصميمات المخصصة وقد يكون من الصعب تصميمها بشكل موحد عبر المتصفحات المختلفة.

الحل

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

النهج المضمن

لنبدأ بمثال يستخدم فئات Tailwind المضمّنة:

الفئات الأساسية لإزالة الأسهم هي:

• [المظهر:textfield]: يزيل التصميم الافتراضي في Firefox.
• [&::-webkit-outer-spin-button]:appearance-none: يزيل زر الدوران الخارجي في متصفحات WebKit.
• [&::-webkit-inner-spin-button]:appearance-none: يزيل زر الدوران الداخلي في متصفحات WebKit.

النهج العالمي

بالنسبة للمشاريع الأكبر، قد ترغب في تطبيق هذا النمط على جميع مدخلات الأرقام. يمكنك القيام بذلك عن طريق إضافة أنماط إلى ملف CSS العام الخاص بك:

1. افتح ملف global.css الخاص بك (أو ما يعادله، مثل app.css أو style.css) اعتمادًا على إطار العمل والإعداد الخاص بك.

2. أضف ملف CSS التالي:
   

/* In your global.css file */
@layer utilities {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
}

1. تأكد من استيراد ملف CSS هذا في ملف Tailwind CSS الرئيسي أو تضمينه في HTML الخاص بك.

بعد إضافة هذه الأنماط العامة، يمكنك تبسيط HTML الخاص بك:

لاحظ أننا قمنا بإزالة فئات إزالة الأسهم من المدخلات الفردية، حيث يتم التعامل معها الآن بواسطة CSS العام.

إضافة أسهم مخصصة

بينما تؤدي إزالة الأسهم الافتراضية إلى تحسين اتساق التصميم، فقد ترغب في إضافة أزرار زيادة/إنقاص مخصصة لتجربة مستخدم أفضل. فيما يلي كيفية إنشاء أسهم مخصصة تتوافق مع تصميم النموذج الخاص بنا:

  Quantity
  

    
    

      
        
      
      
        
      
    
  

دعونا نحلل المكونات الرئيسية لهذا التنفيذ:

1. نقوم بتغليف الإدخال في قسم ذي موضع نسبي للسماح بتحديد الموضع المطلق لأزرارنا المخصصة.

2. يحتفظ حقل الإدخال بتصميمه الأصلي، بما في ذلك الفئات لإزالة الأسهم الافتراضية:
   

   [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none

1. نضيف div مع تحديد الموضع المطلق ليحتوي على الأزرار المخصصة لدينا:

   





 يؤدي هذا إلى وضع الأزرار الموجودة على الجانب الأيمن من الإدخال وتوسيطها عموديًا.


تم تصميم كل زر ليمتزج مع الإدخال:



   






h-full يجعل الزر يملأ ارتفاع الإدخال.

يضيف border-l فاصلًا دقيقًا بين الأزرار.

text-gray-500 وhover:text-sky-500 يوفران تغييرًا في اللون عند التمرير يطابق حالة التركيز في النموذج.



نستخدم أيقونات SVG للأسهم لأعلى ولأسفل، بحجم مناسب مع w-4 h-4.
تستخدم أحداث onclick طريقتي stepUp() وstepDown() في JavaScript لتغيير قيمة الإدخال:




   onclick="document.getElementById('quantity').stepUp()"
   onclick="document.getElementById('quantity').stepDown()"





  
  
  اعتبارات هامة


هناك بعض الأشياء التي يجب عليك مراعاتها:


قد تؤثر إزالة الأسهم على المستخدمين الذين يعتمدون عليها. فكر في توفير طرق بديلة للزيادة/النقصان إذا لزم الأمر.
يعمل هذا الحل في المتصفحات الحديثة. قد تتطلب المتصفحات الأقدم CSS أو JavaScript إضافية.



  
  
  خاتمة


من خلال تنفيذ ذلك، سواء بشكل مضمن أو عالمي، يمكنك بشكل فعال إزالة الأسهم الافتراضية من مدخلات الأرقام عبر مشروعك.

 بالنسبة لأولئك الذين يتطلعون إلى تحسين عملية تطوير Tailwind CSS بشكل أكبر، قم بمراجعة أداة إنشاء صفحات DevDojo Tails، والتي يمكن أن تساعدك على إنشاء تصميمات مذهلة بسهولة.

تعليمات سعيدة!