لا تحتاج إلى الاعتماد على حزمة جهة خارجية لإنشاء مكون إعلام. إليك كيف يمكنك بنائه بنفسك.
هناك العديد من حزم الجهات الخارجية المتاحة في React والتي يمكن أن تساعدك في إنشاء مكون إعلام. ومع ذلك ، إذا كنت تريد فقط مكون إشعار بسيط ، فقد ترغب في إنشاء مكون خاص بك لتجنب إضافة تبعيات غير ضرورية إلى التطبيق الخاص بك.
إنشاء المشروع
سوف تفعلها استخدم Vite لإعداد تطبيق React. Vite هي أداة بناء تتيح لك دعم مشروع React بسرعة.
للبدء ، استخدم مدير حزمة الغزل لإنشاء مشروع Vite جديد عن طريق تشغيل الأمر أدناه.
الغزل يخلق vite
سيطالبك الأمر بإدخال اسم مشروع. أدخل اسم المشروع واضغط على Enter. بعد ذلك ، سيطالبك بتحديد إطار عمل. يختار تتفاعل واضغط على Enter. أخيرًا ، سيطلب منك تحديد متغير ، اختر جافا سكريبت ثم اضغط على Enter.
فيما يلي التكوينات التي سيستخدمها هذا البرنامج التعليمي:
بعد أن ينشئ Vite المشروع ، انتقل إلى مجلد المشروع وافتحه باستخدام محرر التعليمات البرمجية.
يمكنك بعد ذلك بدء تشغيل خادم التطوير عن طريق تشغيل الأمر التالي.
ديف الغزل
سيؤدي هذا إلى فتح تطبيق React الجديد في متصفحك الافتراضي في http://localhost: 5173/.
تصميم مكون الإخطار
من أجل إنشاء مكون إعلام مرن ، يجب أن يكون قادرًا على التعامل مع أنواع مختلفة من الإشعارات بعناوين وأوصاف وأنماط مختلفة. على سبيل المثال ، يحتاج إلى تقديم تحذير ونجاح وإخطار خطأ.
فيما يلي الأشكال المختلفة التي يجب أن يتمكن مكون الإشعار من عرضها.
يمكنك تحقيق ذلك بتمرير الخاصيات إلى المكون الذي يحدد نوع الإشعار الذي سيتم عرضه والعنوان ونص الوصف. باستخدام هذه الدعائم ، يمكنك تخصيص المكون وإعادة استخدامه في جميع أنحاء التطبيق الخاص بك بأقل جهد. إذا كنت بحاجة إلى تجديد معلومات حول الدعائم ، فإليك مقالة تشرح ذلك كيفية استخدام الدعائم في React.
تكوين مكون الإخطار
في ال src مجلد ، قم بإنشاء ملف جديد باسم Notification.jsx وأضف الكود التالي.
يصدّرتقصيروظيفةإشعار({type، title، description}) {
يعود (
{/ * محتوى الإخطار * /}
</div>
)
}
ينشئ هذا الرمز مكونًا وظيفيًا يسمى إشعار بثلاث دعائم: يكتب, عنوان، و وصف. ستستخدم هذه الدعائم لتخصيص أسلوب ومحتوى الإشعار.
من التصميم ، يحتوي المكون على زوجين من الأيقونات ، وهما المعلومات وأيقونة الصليب. أنت تستطيع تنزيل رموز مجانية الاستخدام أو استخدم مكون رمز من حزمة مثل رد فعل الرموز. سيستخدم هذا البرنامج التعليمي رد فعل الرموز لذا قم بتثبيته عن طريق تشغيل الأمر أدناه.
إضافة غزل رد الفعل الرموز
ثم قم باستيراد الرموز الموجودة أعلى ملف إشعار عنصر.
يستورد {RxCross2 ، RxInfoCircled} من"رموز رد الفعل / rx"
الآن ، يمكنك تعديل المكون لاستخدام الرموز والعنوان وقيم خصائص الوصف لإنشاء محتوى الإشعار.
يصدّرتقصيروظيفةإشعار({type، title، description}) {
يعود (
{العنوان} </div>
{وصف} </div>
</div>
</div>
</div>
)
}
الخطوة التالية هي تصميمه بناءً على النوع الذي تم تمريره.
تتمثل إحدى الطرق التي يمكنك اتباعها في تحديد فئات CSS لكل نوع من أنواع الإشعارات التي تريد عرضها. يمكنك بعد ذلك تطبيق الفئة المناسبة بشكل مشروط بناءً على النوع الذي تم تمريره.
للبدء ، قم بإنشاء ملف جديد يسمى ification.css واستيرادها بتنسيق Notification.jsx عن طريق إضافة الكود التالي في الأعلى.
استيراد "./notification.css"
ثم في ification.css تحديد الأنماط الأساسية لمكون الإعلام:
.إشعار {
عرض: ثني;
الاتجاه المرن: صف;
محاذاة العناصر: بداية مرنة;
حشوة: 8مقصف;
}
.notification__left {
عرض: ثني;
الاتجاه المرن: صف;
حشوة: 0مقصف;
فجوة: 8مقصف;
الهامش الأيمن: 24مقصف;
}
.notification__content {
عرض: ثني;
الاتجاه المرن: عمود;
محاذاة العناصر: بداية مرنة;
حشوة: 0مقصف;
}
.notification__title {
خط العائلة: "انتر";
نوع الخط: طبيعي;
وزن الخط: 500;
حجم الخط: 14مقصف;
}
. الإخطار__ الوصف {
خط العائلة: "انتر";
نوع الخط: طبيعي;
وزن الخط: 400;
حجم الخط: 12مقصف;
حشوة: 0;
}
يمكنك بعد ذلك تحديد الأنماط لأنواع الإشعارات المختلفة عن طريق إضافة الكود التالي في ملف CSS.
. الإخطار_ النجاح {
خلفية: # f6fef9;
حدود: 1مقصفصلب# 2f9461;
نصف قطر الحد: 8مقصف;
}
. الإخطار__ خطأ {
خلفية: # افبفا;
حدود: 1مقصفصلب# cd3636;
نصف قطر الحد: 8مقصف;
}
. الإخطار__ تحذير {
خلفية: # fffcf5;
حدود: 1مقصفصلب# c8811a;
نصف قطر الحد: 8مقصف;
}
يقوم الكود أعلاه بتصميم حاوية الإشعارات بناءً على النوع الذي تم تمريره.
لتخصيص العنوان ، استخدم الأنماط التالية.
.notification__title__ النجاح {
لون: # 2f9461;
}
.notification__title__ تحذير {
لون: # c8811a;
}
.notification__title__ خطأ {
لون: # cd3636;
}
بالنسبة إلى نص الوصف المخصص ، استخدم هذه الأنماط.
. الإخطار__ الوصف_النجاح {
لون: # 53b483;
}
. الإخطار _ الوصف _ التحذير {
لون: # e9a23b;
}
.notification__description__ خطأ {
لون: # f34141;
}
وللرموز ، استخدم الفئات التالية.
.notification_icon_error {
لون: # cd3636;
}
. الإخطار__ الأيقونة_النجاح {
لون: # 2f9461;
}
. الإخطار__ أيقونة _ تحذير {
لون: # c8811a;
}
ثم في إشعار المكون ، يمكنك تطبيق الفئة المناسبة بشكل مشروط بناءً على يكتب دعامة ، مثل هذا:
يصدّرتقصيروظيفةإشعار({type، title، description}) {
يعود (
"إعلام الإخطار__$ {type}`}>
"الإعلام _ اليسار"}>
"الإخطار _ الرمز__$ {type}`}/>
"محتوى الإخطار">
"الإعلام _ إخطار العنوان _ العنوان _ _$ {type}`}> {title} </div>
"الإعلام _ إخطار الوصف _ الوصف _ _$ {type}`}> {description} </div>
</div>
</div>
"الإخطار _ الرمز__$ {type}`}/>
</div>
)
}
في هذا المكون ، تقوم بتعيين الفئة ديناميكيًا بناءً على النوع مثل الإخطار_النجاح أو الإخطار _ الخطأ.
لمشاهدة هذا أثناء العمل ، قم باستيراد مكون الإعلام بتنسيق App.jsx واستخدمها على النحو التالي:
يستورد إشعار من'./إشعار'وظيفةبرنامج() {
يعود (
<>
اكتب ="نجاح"
العنوان ="تمت المهمة"
الوصف ="تم إكمال مهمتك بنجاح."
/>
</>
)
}
يصدّرتقصير برنامج
الآن ، يمكنك تمرير نوع مختلف إلى ملف إشعار المكون وتقديم إخطار مناسب يطابق الرسالة.
يعد هذا ضروريًا لتجربة مستخدم جيدة لأن المستخدمين قد وصلوا إلى ربط ألوان وأنماط مختلفة بسيناريوهات مختلفة ، ومن المهم استخدام هذه الارتباطات باستمرار. على سبيل المثال ، سيكون من المربك السماح للمستخدم بمعرفة أنه قام بتحميل صورة بنجاح في مربع إشعار أحمر. قد يعتقدون أن التحميل فشل ، حتى لو كان ناجحًا.
إضافة التفاعل إلى مكون الإعلام
لقد تعلمت كيف يمكنك استخدام الخاصيات لإنشاء مكون إعلام قابل للتخصيص. وللمزيد من ذلك ، يمكنك إضافة انتقالات إلى هذا المكون لجعله أكثر جاذبية. على سبيل المثال ، يمكنك استخدام الرسوم المتحركة لـ CSS لتحريك مكون الإشعار إلى الشاشة وإزالته بعد مرور مدة معينة.
