בניית Popovers, התראות ו-Toasts עם Blueprint UI ב-React

Blueprint UI הוא ערכת כלים פופולרית של ממשק המשתמש של React המספקת סט של רכיבים וסגנונות לשימוש חוזר לבניית יישומי אינטרנט מודרניים. אחד המאפיינים המרכזיים של ממשק המשתמש של Blueprint הוא התמיכה שלו ביצירת פופ-אוברים, התראות וטוסטים, שהם מרכיבים חיוניים להצגת מידע ומשוב למשתמשים.

התקנת ממשק המשתמש של Blueprint

כדי להתחיל עם ממשק המשתמש של Blueprint, תצטרך להתקין אותו תחילה. אתה יכול לעשות זאת באמצעות כל מנהל חבילות לבחירתך.

כדי להתקין אותו באמצעות npm, מנהל החבילות של JavaScript, הפעל את הפקודה הבאה בטרמינל שלך:

npm להתקין @blueprintjs/core

לאחר התקנת ממשק המשתמש של Blueprint, עליך לייבא את קבצי ה-CSS מהספרייה:

@יְבוּא"normalize.css";
@יְבוּא"@blueprintjs/core/lib/css/blueprint.css";
@יְבוּא"@blueprintjs/icons/lib/css/blueprint-icons.css";

על ידי ייבוא ​​קבצים אלה, תוכל לשלב את סגנונות ממשק המשתמש של Blueprint עם הרכיבים שמציע ממשק המשתמש של Blueprint.

יצירת פופ-אוברים באמצעות ממשק המשתמש של Blueprint

Popovers הם עצות כלים המופיעות כאשר המשתמש מרחף מעל אלמנט או לוחץ עליו. הם מספקים מידע נוסף או אפשרויות למשתמש.

כדי ליצור חלונות קופצים באפליקציית React שלך באמצעות ממשק המשתמש של Blueprint, עליך להתקין את ממשק המשתמש של Blueprint Popover2 רְכִיב.

לשם כך, הפעל את הקוד הבא בטרמינל שלך:

npm install --save @blueprintjs/popover2

הקפד לייבא את גיליון הסגנונות של החבילה בקובץ ה-CSS שלך:

@יְבוּא"@blueprintjs/popover2/lib/css/blueprint-popover2.css";

לאחר ייבוא ​​גיליון הסגנונות, תוכל להשתמש ב- Popover2 רכיב ליצירת חלונות קופצים באפליקציה שלך.

לדוגמה:

יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { כפתור } מ"@blueprintjs/core";
יְבוּא { Popover2 } מ"@blueprintjs/popover2";
פוּנקצִיָהאפליקציה() {
const popoverContent = (



Popover כותרת</h3>


זה התוכן בתוך הפופ-אובר.</p>
 </div>
 );
לַחֲזוֹר (




"הַצלָחָה" טקסט="לחץ עלי" />
 </Popover2>
 </div>
 );
}

יְצוּאבְּרִירַת מֶחדָל אפליקציה;

קוד זה יוצר פופ-אובר באמצעות ה- Popover2 רְכִיב. הוא גם מגדיר את א popoverContent משתנה, המכיל את קוד JSX עבור תוכן הפופ-אובר.

ה Popover2 רכיב לוקח את popoverContent כערך שלה תוֹכֶן לִתְמוֹך. ה תוֹכֶן prop מציין את התוכן המוצג בתוך הפופ-אובר. הנה ה Popover2 רכיב עוטף א לַחְצָן רְכִיב. זה גורם להופעת המוקפץ כאשר אתה לוחץ על הכפתור.

הפופ-אובר נראה פשוט, כפי שמוצג כאן:

אתה יכול לסגנן את תוכן הפופ-אובר על ידי העברת א className תמיכה ל popoverContent קוד JSX:

const popoverContent = (
'פופ-אובר'>
Popover כותרת</h3>


זה התוכן בתוך הפופ-אובר.</p>
 </div>
);

לאחר מכן תוכל להגדיר את מחלקת ה-CSS בקובץ ה-CSS שלך:

.popover {
ריפוד: 1rem;
צבע רקע: #e2e2e2;
משפחת גופן: רָהוּט;
}

עכשיו הפופ-אובר אמור להיראות קצת יותר טוב:

ה Popover2 רכיב לוקח כמה אביזרים שיעזרו לך להגדיר אותו כך שיתאים לצרכים שלך. חלק מהאביזרים האלה הם popoverClassName, על אינטראקציה, פתוח, מִינִימָלִי, ו מיקום.

ה מיקום prop קובע את המיקום המועדף של הפופ-אובר ביחס לאלמנט היעד. הערכים הזמינים שלו הם:

• אוטומטי
• התחלה אוטומטית
• סיום אוטומטי
• חלק עליון
• התחלה עליונה
• קצה העליון
• תַחתִית
• התחלה למטה
• תחתית
• ימין
• התחלה נכונה
• קצה ימין
• שמאלה
• שמאל-התחלה
• קצה שמאל

עם ה popoverClassName, אתה יכול להגדיר שם מחלקה של CSS עבור אלמנט הפופ-אובר. תחילה תיצור מחלקת CSS בקובץ ה-CSS שלך כדי להשתמש באביזר.

לדוגמה:

.custom-popover {
צבע רקע: #e2e2e2;
צל קופסא: 0 10פיקסלים 15פיקסלים-3 פיקסליםrgb(0 0 0 / 0.1);
גבול-רדיוס: 12פיקסלים;
ריפוד: 1rem;
}

לאחר יצירת מחלקת ה-CSS, השתמש ב- popoverClassName אביזר להחלת הסגנון המותאם אישית על רכיב Popover2:

 content={popoverContent}
 מיקום="תחתית"
 popoverClassName="פופ-אובר מותאם אישית"
 מינימלי={נָכוֹן}
>
"הַצלָחָה" טקסט="לחץ עלי" />
</Popover2>

ה מִינִימָלִי prop שולט בעיצוב הפופ-אובר. האביזר מקבל ערך בוליאני. אם מוגדר כ-true, הפופ-אובר יהיה בעל עיצוב מינימלי, ללא חץ ומראה קופסא פשוט.

יצירת התראות

התראות הן התראות המופיעות על המסך כדי ליידע את המשתמש על מידע או פעולות חשובות. הם משמשים בדרך כלל להצגת הודעות שגיאה, הודעות הצלחה או אזהרות.

יצירת התראות בממשק המשתמש של Blueprint דומה ל יצירת התראות באמצעות ממשק המשתמש של צ'אקרה. אתה תשתמש ברכיב ההתראה כדי ליצור התראה באפליקציית React שלך באמצעות ממשק המשתמש של Blueprint.

הנה דוגמה:

יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { התראה, לחצן } מ"@blueprintjs/core";
פוּנקצִיָהאפליקציה() {
const [isOpen, setIsOpen] = React.useState(שֶׁקֶר);
const handleOpen = () => {
 setIsOpen(נָכוֹן);
 };
const handleClose = () => {
 setIsOpen(שֶׁקֶר);
 };
לַחֲזוֹר (



"סגור">
זוהי הודעת התראה</p>
 </Alert>
"לחץ עלי" כוונה="הַצלָחָה" onClick={handleOpen} />
 </div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

דוגמה זו מראה כיצד עליך לייבא את עֵרָנִי רכיב מה @blueprintjs/core חֲבִילָה. ה עֵרָנִי רכיב מציג הודעת התראה על המסך. זה גם דורש שלושה אביזרים: פתוח, על סגור, ו confirmButtonText.

ה פתוח prop קובע אם ההתראה גלויה או לא. הגדר אותו כ-true כדי להציג את ההתראה ו-false כדי להסתיר אותה. ה על סגור prop היא פונקציית התקשרות חוזרת הפועלת כאשר משתמש סוגר את ההתראה.

לבסוף, ה confirmButtonText prop קובע את הטקסט המוצג על לחצן האישור.

הודעת ההתראה בדוגמה זו תיראה כך:

יצירת טוסטים עם ממשק המשתמש של Blueprint

טוסטים הם התראות המופיעות על המסך כדי ליידע את המשתמש על מידע או אירועים חשובים. הן דומות להתראות אך בדרך כלל פחות פולשניות ונעלמות במהירות.

כדי ליצור טוסט באפליקציית React שלך באמצעות ממשק המשתמש של Blueprint, השתמש ב- OverlayToaster רְכִיב. ה OverlayToaster הרכיב יוצר מופע טוסטר המשמש לאחר מכן ליצירת טוסטים בודדים.

לדוגמה:

יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { OverlayToaster, Button } מ"@blueprintjs/core";
const toasterInstance = OverlayToaster.create({ עמדה: "למעלה מימין" });
פוּנקצִיָהאפליקציה() {
const showToast = () => {
 toasterInstance.show({
 הוֹדָעָה: "זה טוסט",
 כוונה: "יְסוֹדִי",
 פסק זמן: 3000,
 isCloseButtonShown: שֶׁקֶר,
 סמל: "סימנייה",
 });
 };
לַחֲזוֹר (



"לחץ עלי" כוונה="הַצלָחָה" onClick={showToast} />
 </div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

בלוק הקוד שלמעלה משתמש ב- OverlayToaster.create שיטה ליצירת מופע הטוסטר ומציין את מיקומו באמצעות ה עמדה לִתְמוֹך.

זה גם מגדיר את הפונקציה showToast. פונקציה זו משתמשת ב- הופעה שיטת ה toasterInstance כדי להציג את הטוסט כשקוראים לו. ה הופעה השיטה לוקחת אובייקט עם ה- הוֹדָעָה, כוונה, פסק זמן, isCloseButtonShown, ו סמל אביזרים.

ה הוֹדָעָה prop מציין את תוכן הטקסט של הטוסט, בעוד ש- כוונה אבזר מציין את סוג הטוסט. סגנון הטוסט ישתנה בהתאם לערכו.

אתה יכול לשלוט בכמה זמן תוצג הודעת הטוסט באמצעות פסק זמן לִתְמוֹך. ה סמל prop מציין רכיב סמל שיוצג בטוסט. עם ה isCloseButtonShown prop, אתה יכול לשלוט אם כפתור הסגירה יוצג בטוסט.

בלוק הקוד שלמעלה יפיק טוסט יפהפה כאשר תלחץ על הכפתור, כפי שניתן לראות בתמונה למטה.

אם אתה מחפש ליצור הודעות טוסט אטרקטיביות באפליקציית React שלך, ממשק המשתמש של Blueprint הוא אפשרות מצוינת. הוא מספק מגוון רחב של רכיבים מוגדרים מראש שבהם תוכל להשתמש כדי ליצור התראות התואמות את סגנון היישום שלך.

עם זאת, אם אתה עובד על פרויקט קטן שאינו דורש את כל התכונות של ממשק המשתמש של Blueprint, React Toastify היא אלטרנטיבה קלת משקל ליצירת התראות יפות.

שיפור חווית המשתמש עם טוסטים, פופ-אוברים והתראות

למדת כיצד ליצור פופ-אובר, התראות וטוסטים באפליקציית React שלך באמצעות ממשק המשתמש של Blueprint. רכיבים אלו חיוניים למתן מידע ומשוב למשתמשים ויכולים לשפר משמעותית את חווית המשתמש של האפליקציה שלך. אתה יכול בקלות ליצור רכיבים אלה באמצעות המידע שהשגת במינימום מאמץ והתאמה אישית.