احصل على تنبيهات متسقة وجذابة عبر موقع React باستخدام هذه المكتبة.
التنبيهات هي رسائل يتم عرضها على موقع ويب / تطبيق ويب لنقل معلومات مهمة إلى المستخدم. يلعبون دورًا مهمًا في تطبيقات الويب. توجد طرق عديدة لإنشاء التنبيهات في React ؛ شقرا UI تجعل العملية سهلة وفعالة.
Chakra UI هي مكتبة مكونات شائعة لـ React توفر مجموعة من مكونات واجهة المستخدم القابلة للتخصيص والتي يمكن الوصول إليها.
تثبيت شقرا UI
لاستخدام مكتبة Chakra UI ، واحدة من العديد من مكتبات مكونات التفاعل، تحتاج أولاً إلى تثبيته. يمكنك تثبيته عن طريق تشغيل الأمر الطرفي التالي في دليل مشروع node.js:
npm أنا @ chakra-ui / رد فعل @ العاطفة / رد فعل @ العاطفة / الحركة على غرار فرامر
بدلاً من ذلك ، يمكنك تثبيت Chakra UI باستخدام Yarn. للقيام بذلك ، قم بتشغيل الأمر التالي:
إضافة الغزل @ chakra-ui / رد فعل @ العاطفة / رد فعل @ العاطفة / حركة فرامير على غرار
إعداد شقرا UI
بعد تثبيت Chakra UI ، يجب عليك إتاحته في التطبيق الخاص بك. للقيام بذلك ، تحتاج إلى إعداد ملف ChakraProvider عنصر.
ال ChakraProvider المكون هو مكون عالي المستوى توفره مكتبة Chakra UI. إنه يلف التطبيق بالكامل ويوفر المظهر وسياق التصميم لجميع مكوناته.
لاقامة ملف ChakraProvider المكون ، قم باستيراده من @ شقرا واجهة المستخدم / رد:
يستورد تتفاعل من'تتفاعل'
يستورد رد فعل من"رد فعل دوم / العميل"
يستورد برنامج من'./برنامج'
يستورد {ChakraProvider} من"@ chakra-ui / رد فعل"
ReactDOM.createRoot (وثيقة.getElementById ('جذر') مثل HTMLElement).
</ChakraProvider>
</React.StrictMode>
)
ال ChakraProvider المكون يدعم أ سمة دعم. تمرير سمة دعم ل ChakraProvider يضمن أن جميع مكونات Chakra UI في التطبيق يمكنها الوصول إلى السمة المقدمة وسياق التصميم. ال سمة الدعامة اختيارية ؛ إذا لم تنجح ، فستستخدم Chakra UI سمة افتراضية.
إنشاء تنبيه مخصص باستخدام مكونات التنبيه
تقدم Chakra UI أربعة مكونات تتيح لك إنشاء تنبيه مخصص: يُحذًِر, تنبيه, عنوان التنبيه، و وصف التنبيه.
لإنشاء رسالة التنبيه الخاصة بك ، قم باستيراد هذه المكونات من مكتبة Chakra UI واستخدمها على النحو التالي:
يستورد تتفاعل من'تتفاعل';
يستورد {Alert، AlertIcon، AlertDescription، AlertTitle} من"@ chakra-ui / رد فعل"وظيفةبرنامج() {
يعود ('نجاح'> مرحبًا !!!/AlertTitle> من الجيد أن تكون هنا </AlertDescription>
</Alert>
</div>
)
}
يصدّرتقصير برنامج
بعد استيراد المكونات ، يقوم ملف يُحذًِر يعرض المكون رسالة إلى المستخدم. لديها حالة تم تعيين prop على "نجاح" ، مما يشير إلى أن الرسالة هي رسالة نجاح.
هناك ثلاث حالات أخرى: "معلومات" و "خطأ" و "تحذير". يعتمد نظام الألوان والرمز اللذين يستخدمهما التنبيه على حالة الرسالة.
ال يُحذًِر المكون يحتوي على ثلاثة أبناء: تنبيه, عنوان التنبيه، و وصف التنبيه. ال تنبيه يعرض المكون رمزًا صغيرًا بجوار الرسالة ، عنوان التنبيه يعرض الرسالة الرئيسية ، و وصف التنبيه يعرض وصفاً أكثر تفصيلاً للرسالة.
ستنشئ كتلة التعليمات البرمجية السابقة تنبيهًا يبدو كالتالي:
تخصيص رسائل التنبيه باستخدام الدعامة المتغيرة
لتخصيص مظهر رسالة التنبيه ، استخدم ملف البديل دعامة من يُحذًِر عنصر. ال البديل تحدد الخاصية المظهر المرئي لرسالة التنبيه وتحدد نظام الألوان والأيقونة ووزن الخط للرسالة بناءً على القيمة التي تمررها إليها.
ال البديل يقبل prop العديد من قيم السلاسل مثل دقيق, صلب, اللهجة اليسرى, أعلى لهجة, اللهجة اليمنى، و اللهجة السفلية. تمثل كل قيمة نمطًا مرئيًا مختلفًا لرسالة التنبيه.
فيما يلي مثال لأربعة مكونات تنبيه ذات متغيرات مختلفة:
يستورد تتفاعل من'تتفاعل';
يستورد {Alert، AlertIcon، AlertDescription، AlertTitle، Flex} من"@ chakra-ui / رد فعل"وظيفةبرنامج() {
يعود ('مركز' فجوة ='3' الاتجاه ='عمود' طن متري ='4'> 'نجاح' المتغير ='صلب'> مرحبًا !!!/AlertTitle> من الجيد أن تكون هنا </AlertDescription>
</Alert>
'نجاح' المتغير ='دقيق'> مرحبًا !!!/AlertTitle> من الجيد أن تكون هنا </AlertDescription>
</Alert>
'نجاح' المتغير ="أعلى لهجة"> مرحبًا !!!/AlertTitle> من الجيد أن تكون هنا </AlertDescription>
</Alert>
'نجاح' المتغير ="يسار"> مرحبًا !!!/AlertTitle> من الجيد أن تكون هنا </AlertDescription>
</Alert>
</Flex>
</div>
)
}
يصدّرتقصير برنامج
سيؤدي عرض كتلة التعليمات البرمجية أعلاه إلى عرض تنبيه مخصص مثل هذا:
تخصيص رسائل التنبيه الخاصة بك باستخدام className Prop
بدلاً من الالتزام بالمظهر الافتراضي لرسائل التنبيه ، يمكنك تخصيصه باستخدام ملف اسم الطبقة دعم. أنت تستخدم ملف اسم الطبقة prop لتحديد فئة CSS وتطبيق نمطك المخصص على رسالة التنبيه.
على سبيل المثال:
يستورد تتفاعل من'تتفاعل';
يستورد {Alert، AlertIcon، AlertDescription، AlertTitle} من"@ chakra-ui / رد فعل"وظيفةبرنامج() {
يعود ('نجاح' className ='يُحذًِر'> مرحبًا !!!/AlertTitle> من الجيد أن تكون هنا </AlertDescription>
</Alert>
</div>
)
}
يصدّرتقصير برنامج؛
في هذا المثال ، يحتوي مكون التنبيه على فئة CSS "تنبيه". بعد تحديد فئة CSS ، يمكنك تحديد أنماطك في ملف CSS الخاص بك.
مثل ذلك:
.يُحذًِر {
لون احمر؛
عائلة الخطوط: مخطوطة ؛
العرض: فليكس ؛
الاتجاه المرن: العمود.
فجوة: 0.4ريم.
}
سيطبق الكود أعلاه أنماط CSS على مكون التنبيه. إذا كنت معتادًا على دعائم نمط Chakra UI ، فيجب عليك استخدامها لتصميم رسائل التنبيه بدلاً من تنسيق اسم الطبقة دعم.
بعد تطبيق أنماط CSS أعلاه ، سيتم عرض مكون التنبيه كما هو موضح في الصورة أدناه:
تفعيل رسائل التنبيه رداً على أحداث المستخدم
لقد قمت بإنشاء مكون تنبيه يعرض باستمرار رسالة تنبيه على الشاشة. ومع ذلك ، لتحسين تجربة المستخدم ، يمكنك تشغيل رسالة التنبيه استجابةً لأحداث معينة يبدأها المستخدم ، باستخدام مستمعي حدث JavaScript. قد تتضمن هذه الأحداث النقر فوق زر أو إرسال نموذج أو مواجهة خطأ.
لتشغيل رسالة التنبيه ردًا على الأحداث ، استخدم حالة React و عرض دعامة لمكونات واجهة المستخدم شقرا.
على سبيل المثال:
يستورد تتفاعل من'تتفاعل';
يستورد {Alert، AlertIcon، AlertDescription، AlertTitle، Button، CloseButton} من"@ chakra-ui / رد فعل"وظيفةبرنامج() {
مقدار ثابت [display، setDisplay] = React.useState ('لا أحد');وظيفةيخطر() {
ضبط العرض ('ثني');
}وظيفةيغلق() {
ضبط العرض ('لا أحد');
}يعود (
"برنامج">'نجاح' عرض = {display} variant ='صلب'> مرحبًا !!!/AlertTitle> من الجيد أن تكون هنا </AlertDescription> 'مطلق' أعلى ="6 بكسل" صحيح ="6 بكسل" onClick = {close} />
</Alert>
يصدّرتقصير برنامج
يدير مقطع التعليمات البرمجية هذا حالة عرض الإشعارات بامتداد useState خطاف. يقوم بتعيين الحالة الأولية لعرض الإشعار على "لا شيء" ، مما يخفي الإشعار.
عندما ينقر المستخدم على ملف زر، يستدعي يخطر وظيفة. استدعاء وظيفة الإعلام يغير قيمة عرض الحالة من "لا شيء" إلى "مرن" ، مما يجعل الإشعار مرئيًا.
عندما ينقر المستخدم على ملف زر الاغلاقتستدعي وظيفة الإغلاق. يغير حالة العرض مرة أخرى إلى "لا شيء" مما يخفي الإشعار.
يمكنك الآن إنشاء تنبيهات قابلة للتخصيص
لقد تعلمت الآن كيفية إنشاء تنبيه مخصص في تطبيق React الخاص بك باستخدام Chakra UI. باستخدام Chakra UI ، يعد إنشاء تنبيهات مخصصة في React أمرًا سهلاً وبديهيًا ، مما يسمح لنا بتوفير معلومات واضحة وموجزة لمستخدمينا. يوفر Chakra UI العديد من مكونات واجهة المستخدم الأخرى القابلة للتخصيص والتي يمكن الوصول إليها لمساعدتك في إنشاء تطبيقات React رائعة.