القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

يمكن أن تؤدي إضافة منتقي ألوان إلى تطبيق React إلى تسهيل اتخاذ قرارات المستخدمين بشأن الألوان التي يريدون استخدامها. تعد أدوات التقاط الألوان أداة رائعة للمستخدمين الذين يعملون باستخدام تطبيق رسومات أو أي تطبيق يدعم التخصيص.

توفر مكتبة ألوان التفاعل مجموعة كبيرة من الخيارات والعديد من أنماط منتقي الألوان لتناسب احتياجاتك.

إضافة منتقي الألوان إلى التطبيق الخاص بك

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

نظرة عامة على رد الفعل اللون

تعد مكتبة ألوان التفاعل طريقة رائعة لإضافة منتقي ألوان إلى تطبيق React الخاص بك. يوفر واجهة سهلة الاستخدام تتيح للمستخدمين الاختيار من بين مجموعة من الألوان. توفر المكتبة أيضًا الدعائم التي يمكنك استخدامها لتخصيص منتقي الألوان.

الكود الخاص بإضافة منتقي الألوان إلى تطبيق React الخاص بك واضح ومباشر. لاستخدام مكتبة ألوان التفاعل ، تحتاج أولاً إلى تثبيت المكتبة باستخدام

instagram viewer
npm ، مدير الحزم لـ Node.js.

npm أنا رد فعل اللون

بعد ذلك ، ما عليك سوى إضافة الكود التالي إلى المكون الذي تريد عرض منتقي الألوان فيه:

يستورد تتفاعل من'تتفاعل'
يستورد {SketchPicker} منرد فعل اللون
فصلعنصريمتدتتفاعل.عنصر{
 يجعل() {
يعود<SketchPicker />
 }
}
يصدّرتقصير عنصر

سيعرض الكود أعلاه منتقي ألوان أساسي. سيسمح للمستخدمين بالاختيار من بين مجموعة من الألوان. سيعرض المنتقي أيضًا رمز HEX للون المحدد ، والذي يمكنك استخدامه في أجزاء أخرى من تطبيقك.

الدعائم المتاحة

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

فيما يلي الدعائم المتوفرة لـ Color Picker:

  • عرض: عرض منتقي الألوان بالبكسل.
  • ارتفاع: ارتفاع منتقي الألوان بالبكسل.
  • لون: اللون الأولي للمحدد.
  • على التغيير: وظيفة رد يتم تشغيلها عند تغير اللون.
  • عند التغيير اكتمل: وظيفة رد اتصال يتم تشغيلها عند اكتمال تغيير اللون.

يوضح الكود التالي كيفية استخدام جميع الدعائم المتوفرة لـ Color Picker:

يستورد تتفاعل من'تتفاعل'
يستورد {SketchPicker} منرد فعل اللون

فصلعنصريمتدتتفاعل.عنصر{

 يجعل() {
يعود (
 العرض = {200}
 الارتفاع = {200}
 اللون ="# ff0000"
 عند التغيير = {(اللون) => وحدة التحكم.log (لون)}
 onChangeComplete = {(اللون ، الحدث) => وحدة التحكم.log (لون)}
 />
 )
 }
}
يصدّرتقصير عنصر

سيعرض الكود أعلاه منتقي ألوان بعرض 200 بكسل وارتفاع 200 بكسل ولون مبدئي # ff0000 ولوحة ألوان. سيعرض أيضًا حقل إدخال لرمز اللون وسيعرض قناة ألفا. عندما يتغير اللون ، سوف يستدعي onChange ويسجل اللون الجديد في وحدة التحكم.

إضافة منتقي ألوان إضافي

توفر مكتبة ألوان التفاعل مجموعة من منتقي الألوان المختلفة للاختيار من بينها ، بالإضافة إلى SketchPicker المستخدم في القسم الأخير ، يمكنك أيضًا استخدام ChromePicker.

قم باستيراد ChromePicker بنفس الطريقة التي استوردت بها SketchPicker:

يستورد {ChromePicker} منرد فعل اللون;

بمجرد استيراد ChromePicker ، يمكنك استخدامه في تطبيقك عن طريق إضافة الشفرة التالية:

 اللون = { هذا.state.background}
 onChangeComplete = { هذا.handleChangeComplete}
 DisableAlpha = {حقيقي}
/>

يأخذ ChromePicker نفس الدعائم التي يستخدمها SketchPicker ، ولكن لديه أيضًا بعض الخيارات الإضافية ، مثل القدرة على تعطيل قناة ألفا ، والتي يمكنك القيام بها باستخدام خاصية تعطيل ألفا. يمكنك أيضًا ضبط اللون مباشرةً باستخدام دعامة اللون.

هناك أيضًا منتقيات ألوان أخرى متوفرة في مكتبة ألوان التفاعل ، مثل Block و Twitter و GitHub. كل من هذه المجموعات لها أدواتها الخاصة ، لذا تأكد من مراجعة الوثائق للحصول على مزيد من المعلومات.

تحسين تجربة المستخدم الخاصة بك مع منتقي الألوان

تعد إضافة منتقي الألوان إلى تطبيق React طريقة رائعة لتحسين تجربة المستخدم. يسمح للمستخدمين بتحديد الألوان لتطبيقاتهم بسرعة وسهولة. يمكنك أيضًا جعل منتقي الألوان أكثر سهولة في الاستخدام باستخدام Tailwind CSS.