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

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

تعرف على أساسيات Blueprint UI Toolkit وكيفية استخدامها لبناء تطبيق React بسيط.

Blueprint UI Toolkit عبارة عن ملف مكتبة مكون React UI. يحتوي على مجموعة من المكونات المعدة مسبقًا والتي يسهل استخدامها وتخصيصها. يمكنك استخدام هذه المكونات المصممة مسبقًا خارج الصندوق أو تعديلها لتناسب احتياجاتك الخاصة.

تتضمن مكونات Blueprint UI Toolkit الأزرار والنماذج والشروط والتنقل والجداول. يمكن أن يوفر لك استخدام هذه المكونات الوقت والجهد نظرًا لأنك لست مضطرًا لتصميم وبناء كل مكون من البداية.

لبدء استخدام Blueprint UI Toolkit ، ستحتاج إلى إنشاء تطبيق React.

بمجرد إعداد مشروعك ، يمكنك تثبيت Blueprint UI Toolkit باستخدام أي مثبت حزمة Node تختاره. لتثبيت Blueprint UI Toolkit باستخدام npm ، قم بتشغيل الأمر التالي في جهازك الطرفي:

instagram viewer 

npm install @ blueprintjs / core

لاستخدام الغزل بدلاً من ذلك ، قم بتشغيل هذا الأمر:

إضافة الغزل @ blueprintjs / الأساسية

بمجرد تثبيت Blueprint UI Toolkit ، يمكنك استخدام المكونات التي تختارها في تطبيق React الخاص بك.

قبل استخدام المكونات ، قم بتضمين ملفات CSS من Blueprint UI Toolkit:

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

تؤدي إضافة كتلة التعليمات البرمجية أعلاه إلى ملف CSS الخاص بك إلى تطبيق أنماط Blueprint UI على مكوناته.

على سبيل المثال ، لإضافة زر إلى التطبيق الخاص بك ، استخدم زر مكون من Blueprint UI Toolkit:

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






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

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

ال نية تحدد الدعامة طبيعة الزر التي تنعكس في لون الخلفية. في هذا المثال ، يحتوي الزر على ملف نجاح نية مما يعطيها لون خلفية أخضر. تقدم Blueprint UI العديد من النوايا الأساسية بما في ذلك أساسي (أزرق)، نجاح (أخضر)، تحذير (برتقالي) و خطر (أحمر).

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

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

ستُنشئ كتلة التعليمات البرمجية السابقة زرًا يبدو كالتالي:

يمكنك أيضًا استخدام ملف AnchorButton مكون لإنشاء زر في التطبيق الخاص بك. ال AnchorButton المكون هو إصدار متخصص من مكون Button مصمم بشكل صريح للاستخدام كرابط.

يقبل هذا المكوِّن العديد من الخاصيات مثل مكون Button ، بما في ذلك نص, كبير, صغير, نية، و أيقونة. كما أنه يقبل href و هدف الدعائم.

ال href تحدد الخاصية عنوان URL الذي يرتبط به الزر و هدف تحدد الخاصية الخاصة الإطار أو الإطار الهدف للارتباط:

يستورد تتفاعل من"تتفاعل";
يستورد {AnchorButton} من"@ blueprintjs / core";
وظيفةبرنامج() {
يعود (




 href =" https://example.com/"
 النية ="أساسي"
 نص ="انقر فوق لي"
 الهدف ="_فارغ"
 />
 </div>
 );
}
يصدّرتقصير برنامج؛

هذا الكود أعلاه يجعل ملف AnchorButton عنصر. المكونات href قيمة الدعامة هي " https://example.com/” و ال هدف قيمة prop هي "_blank" مما يعني أن الرابط سيفتح في علامة تبويب أو نافذة متصفح أخرى.

من المكونات الأساسية الأخرى لمجموعة أدوات Blueprint UI Toolkit بطاقة عنصر. هذا مكون قابل لإعادة الاستخدام يعرض المعلومات بطريقة مرئية جذابة.

يأخذ مكون البطاقة اثنين من الدعائم تفاعلي و ارتفاع. ال ارتفاع يتحكم prop في عمق ظل البطاقة ، مع القيم الأعلى التي تنتج تأثير ظل أكثر بروزًا.

ال تفاعلي يقبل prop قيمة منطقية. عند التعيين على "صواب" ، فإنه يتيح التمرير والنقر على التفاعلات على البطاقة ، مما يسمح لها بالاستجابة لإدخال المستخدم.

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

يستورد تتفاعل من"تتفاعل";
يستورد {البطاقة ، الارتفاع} من"@ blueprintjs / core";
وظيفةبرنامج() {
يعود (




حقيقي} الارتفاع = {الارتفاع. TWO}>
هذه بطاقة </h2>




هذا بعض المحتوى في بطاقتي </p>
 </Card>
 </div>
 );
}


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

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

يمكنك أيضًا استيراد ملف ارتفاع مكون من @ blueprintjs / كور. ال ارتفاع المكون هو تعداد يحدد مجموعة من القيم المحددة مسبقًا التي يمكنك استخدامها لتعيين عمق ظل المكون.

فيما يلي القيم المتاحة لـ ارتفاع عد:

  1. ارتفاع. صفر: تحدد هذه القيمة عمق الظل على 0 ، مما يشير إلى أن المكون لا يحتوي على أي ظل مطبق
  2. ارتفاع. واحد: تحدد هذه القيمة عمق الظل على 1.
  3. ارتفاع. اثنين: تحدد هذه القيمة عمق الظل على 2.
  4. ارتفاع. ثلاثة: تحدد هذه القيمة عمق الظل على 3.
  5. ارتفاع. أربعة: تحدد هذه القيمة عمق الظل على 4.
  6. ارتفاع. خمسة: تحدد هذه القيمة عمق الظل على 5.

سيؤدي عرض مقطع التعليمات البرمجية أعلاه إلى عرض صورة على شاشتك تبدو كالتالي:

من السهل تخصيص مكونات Blueprint UI Toolkit. يمكنك استخدام CSS التقليدية لتعديل مظهر المكونات ، أو يمكنك استخدام الدعائم المتوفرة لتغيير سلوكها.

على سبيل المثال ، يمكنك تخصيص مظهر الزر عن طريق تمرير ملف اسم الطبقة دعم:

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






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

يطبق مقطع التعليمات البرمجية أعلاه فئة مخصصة على الزر ، مما يسمح لك بتعديل مظهره باستخدام CSS:

.my-button{
نصف قطر الحد: 10مقصف;
حشوة: 0.4rem 0.8rem;
}

سيؤدي تطبيق هذه الأنماط إلى ظهور الزر الخاص بك إلى حد ما كما يلي:

هناك الكثير من Blueprint UI

تقدم Blueprint UI مكونات أكثر مما هو مذكور أعلاه ، مثل Alert و Popover و toast وما إلى ذلك. ومع ذلك ، مع المعلومات المقدمة ، يمكنك إنشاء تطبيق React بسيط باستخدام Blueprint UI.

يمكنك تصميم تطبيق React الخاص بك باستخدام طرق مختلفة. يمكنك استخدام CSS التقليدية و SASS / SCSS و Tailwind CSS و CSS في مكتبات JS مثل العاطفة والمكونات ذات الأنماط وما إلى ذلك.