إنشاء العناصر المنبثقة والتنبيهات والخبز المحمص باستخدام Blueprint UI في React

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

تثبيت Blueprint UI

لبدء استخدام Blueprint UI ، ستحتاج إلى تثبيته أولاً. يمكنك القيام بذلك باستخدام أي مدير حزم من اختيارك.

لتثبيته باستخدام ملفات npm ، مدير حزم JavaScript ، قم بتشغيل الأمر التالي في جهازك الطرفي:

npm install @ blueprintjs / core

بعد تثبيت Blueprint UI ، يجب عليك استيراد ملفات CSS من المكتبة:

@يستورد"normalize.css";
@يستورد"@ blueprintjs / core / lib / css / blueprint.css";
@يستورد"@ blueprintjs / icons / lib / css / blueprint-icons.css";

من خلال استيراد هذه الملفات ، ستتمكن من دمج أنماط Blueprint UI مع المكونات التي تقدمها Blueprint UI.

إنشاء Popovers باستخدام Blueprint UI

النوافذ المنبثقة هي تلميحات أدوات تظهر عندما يقوم المستخدم بالتمرير فوق عنصر أو النقر فوقه. أنها توفر معلومات أو خيارات إضافية للمستخدم.

لإنشاء عناصر منبثقة في تطبيق React الخاص بك باستخدام Blueprint UI ، يجب عليك تثبيت Blueprint UI Popover2 عنصر.

للقيام بذلك ، قم بتشغيل الكود التالي في جهازك الطرفي:

تثبيت npm - حفظ @ blueprintjs / popover2

تأكد من استيراد ورقة أنماط الحزمة في ملف CSS الخاص بك:

@يستورد"@ blueprintjs / popover2 / lib / css / blueprint-popover2.css";

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

على سبيل المثال:

يستورد تتفاعل من"تتفاعل";
يستورد { زر } من"@ blueprintjs / core";
يستورد {Popover2} من"@ blueprintjs / popover2";
وظيفةبرنامج() {
مقدار ثابت popoverContent = (



عنوان Popover </h3>


هذا هو المحتوى الموجود داخل النافذة المنبثقة/p>
 </div>
 );
يعود (




"نجاح" نص ="انقر فوق لي" />
 </Popover2>
 </div>
 );
}

يصدّرتقصير برنامج؛

ينشئ هذا الرمز نافذة منبثقة باستخدام امتداد Popover2 عنصر. كما تحدد أ popoverContent متغير ، والذي يحتوي على كود JSX لمحتوى popover.

ال Popover2 المكون يأخذ popoverContent كقيمة لها محتوى دعم. ال محتوى تحدد الخاصية المحتوى المعروض داخل النافذة المنبثقة. هنا ، Popover2 يلف المكون أ زر عنصر. يؤدي هذا إلى عرض النافذة المنبثقة عند النقر فوق الزر.

تبدو النافذة المنبثقة بسيطة ، كما هو موضح هنا:

يمكنك تصميم المحتوى المنبثق عن طريق تمرير ملف اسم الطبقة دعم ل popoverContent كود JSX:

مقدار ثابت popoverContent = (
'البوب'>
عنوان Popover </h3>


هذا هو المحتوى الموجود داخل النافذة المنبثقة/p>
 </div>
);

يمكنك بعد ذلك تحديد فئة CSS في ملف CSS الخاص بك:

.البوب {
حشوة: 1rem;
لون الخلفية: # e2e2e2;
خط العائلة: مخطوطة;
}

الآن يجب أن تبدو النافذة المنبثقة أفضل قليلاً:

ال Popover2 يأخذ المكون بعض الدعائم التي ستساعدك على تكوينه ليناسب احتياجاتك. بعض هذه الدعائم popoverClassName, عند التفاعل, مفتوح, الحد الأدنى، و تحديد مستوى.

ال تحديد مستوى تحدد الخاصية الموضع المفضل للعنصر المنبثق بالنسبة للعنصر المستهدف. قيمه المتاحة هي:

• آلي
• بدء تلقائي
• نهاية تلقائية
• قمة
• بداية القمة
• الطرف العلوي
• قاع
• بداية القاع
• نهاية القاع
• يمين
• بداية صحيحة
• النهاية اليمنى
• غادر
• اليسار البداية
• اليسار

مع ال popoverClassName، يمكنك تحديد اسم فئة CSS للعنصر المنبثق. ستقوم أولاً بإنشاء فئة CSS في ملف CSS الخاص بك لاستخدام الخاصية.

على سبيل المثال:

.custom-popover {
لون الخلفية: # e2e2e2;
مربع الظل: 0 10مقصف 15مقصف-3 بكسلRGB(0 0 0 / 0.1);
نصف قطر الحد: 12مقصف;
حشوة: 1rem;
}

بعد إنشاء فئة CSS ، استخدم ملف popoverClassName prop لتطبيق النمط المخصص على مكون Popover2:

 المحتوى = {popoverContent}
 التنسيب ="نهاية القاع"
 popoverClassName ="نافذة منبثقة مخصصة"
 الحد الأدنى = {حقيقي}
>
"نجاح" نص ="انقر فوق لي" />
</Popover2>

ال الحد الأدنى يتحكم عنصر الدعم في تصميم العنصر المنبثق. تقبل الدعامة قيمة منطقية. إذا تم الضبط على "صواب" ، فإن العنصر المنبثق سيكون له حد أدنى من التصميم ، وبدون سهم ، ومظهر مربع بسيط.

إنشاء التنبيهات

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

يشبه إنشاء التنبيهات في Blueprint UI إنشاء تنبيهات باستخدام Chakra UI. ستستخدم مكون التنبيه لإنشاء تنبيه في تطبيق React الخاص بك باستخدام Blueprint UI.

هذا مثال:

يستورد تتفاعل من"تتفاعل";
يستورد {تنبيه ، زر} من"@ blueprintjs / core";
وظيفةبرنامج() {
مقدار ثابت [isOpen، setIsOpen] = React.useState (خطأ شنيع);
مقدار ثابت مقبض مفتوح = () => {
 setIsOpen (حقيقي);
 };
مقدار ثابت مقبض إغلاق = () => {
 setIsOpen (خطأ شنيع);
 };
يعود (



"يغلق">
هذه رسالة تنبيه </p>
 </Alert>
"انقر فوق لي" النية ="نجاح" onClick = {handleOpen} />
 </div>
 );
}
يصدّرتقصير برنامج؛

يوضح هذا المثال كيف يجب عليك استيراد ملف يُحذًِر مكون من @ blueprintjs / كور طَرد. ال يُحذًِر يعرض المكون رسالة تنبيه على الشاشة. يتطلب أيضًا ثلاث دعائم: مفتوح, عند الإغلاق، و ConfirmButtonText.

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

أخيرًا ، ConfirmButtonText تحدد الخاصية النص المعروض على زر التأكيد.

سيبدو إشعار التنبيه في هذا المثال على النحو التالي:

إنشاء الخبز المحمص مع مخطط UI

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

لإنشاء نخب في تطبيق React الخاص بك باستخدام Blueprint UI ، استخدم ملف OverlayToaster عنصر. ال OverlayToaster يقوم المكون بإنشاء مثيل محمصة يتم استخدامه بعد ذلك لإنشاء الخبز المحمص الفردي.

على سبيل المثال:

يستورد تتفاعل من"تتفاعل";
يستورد {OverlayToaster، Button} من"@ blueprintjs / core";
مقدار ثابت toasterInstance = OverlayToaster.create ({ موضع: "اعلى اليمين" });
وظيفةبرنامج() {
مقدار ثابت showToast = () => {
 toasterInstance.show ({
 رسالة: "هذا نخب",
 نية: "أساسي",
 نفذ الوقت: 3000,
 isCloseButtonShown: خطأ شنيع,
 أيقونة: "إشارة مرجعية",
 });
 };
يعود (



"انقر فوق لي" النية ="نجاح" onClick = {showToast} />
 </div>
 );
}
يصدّرتقصير برنامج؛

تستخدم كتلة التعليمات البرمجية أعلاه الامتداد OverlayToaster.create لتوليد مثيل المحمصة وتحديد موقعها باستخدام موضع دعم.

كما تحدد الوظيفة showToast. تستخدم هذه الوظيفة ملف يعرض طريقة محمصة لعرض الخبز المحمص عند استدعائه. ال يعرض يأخذ الأسلوب كائنًا بامتداد رسالة, نية, نفذ الوقت, isCloseButtonShown، و أيقونة الدعائم.

ال رسالة تحدد الخاصية محتوى النص من الخبز المحمص ، في حين أن ملف نية تحدد الدعامة نوع الخبز المحمص. يختلف أسلوب الخبز المحمص بناءً على قيمته.

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

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

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

ومع ذلك ، إذا كنت تعمل في مشروع صغير لا يتطلب جميع ميزات Blueprint UI ، يُعد React Toastify بديلاً خفيفًا لإنشاء إعلامات جميلة.

تعزيز تجربة المستخدم من خلال الخبز المحمص ، والفئات المنبثقة ، والتنبيهات

لقد تعلمت كيفية إنشاء النوافذ المنبثقة والتنبيهات والخبز المحمص في تطبيق React الخاص بك باستخدام Blueprint UI. هذه المكونات ضرورية لتوفير المعلومات والتعليقات للمستخدمين ويمكن أن تعزز بشكل كبير تجربة المستخدم لتطبيقك. يمكنك إنشاء هذه المكونات بسهولة باستخدام المعلومات التي حصلت عليها بأقل جهد وتخصيص.