צור התראות מותאמות אישית באפליקציית React שלך עם ממשק המשתמש של צ'אקרה

התראות הן הודעות המוצגות באתר/יישום אינטרנט כדי להעביר מידע חשוב למשתמש. הם ממלאים תפקיד מכריע ביישומי אינטרנט. ישנן דרכים רבות ליצור התראות ב-React; ממשק המשתמש של צ'אקרה הופך את התהליך לקל ויעיל.

צ'אקרה UI היא ספריית רכיבים פופולרית עבור React המספקת סט של רכיבי UI הניתנים להתאמה אישית ונגישים.

התקנת ממשק המשתמש של צ'אקרה

כדי להשתמש בספריית ממשק המשתמש של צ'אקרה, אחת מני רבות של ספריות רכיבי תגובה, תחילה עליך להתקין אותו. אתה יכול להתקין אותו על ידי הפעלת פקודת המסוף הבאה בספריה של פרויקט node.js שלך:

npm i @chakra-ui/react @emotion/react @emotion/framer-motion בסגנון

לחלופין, אתה יכול להתקין את ממשק המשתמש של Chakra באמצעות Yarn. לשם כך, הפעל את הפקודה הבאה:

חוט הוסף @chakra-ui/react @emotion/react @emotion/framer-motion בסגנון

הגדרת ממשק המשתמש של צ'אקרה

לאחר התקנת ממשק המשתמש של Chakra, עליך להפוך אותו לזמין באפליקציה שלך. כדי לעשות זאת, עליך להגדיר את ספק צ'אקרה רְכִיב.

ה ספק צ'אקרה רכיב הוא רכיב ברמה העליונה שספריית ממשק המשתמש של צ'אקרה מספקת. הוא עוטף את כל האפליקציה ומספק את ההקשר של הנושא והסטיילינג לכל מרכיביו.

כדי להגדיר את ספק צ'אקרה רכיב, ייבא ממנו @chakra-ui/react:

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא ReactDOM מ'react-dom/client'
יְבוּא אפליקציה מ'./אפליקציה'
יְבוּא { ChakraProvider } מ'@chakra-ui/react'
ReactDOM.createRoot(מסמך.getElementById('שורש') כפי ש HTMLElement).render(



 </ChakraProvider>
 </React.StrictMode>
)

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

יצירת התראה מותאמת אישית באמצעות רכיבי התראה

ממשק המשתמש של צ'אקרה מציע ארבעה רכיבים המאפשרים לך ליצור התראה מותאמת אישית: עֵרָנִי, AlertIcon, AlertTitle, ו תיאור התראה.

כדי ליצור את הודעת ההתראה שלך, ייבא רכיבים אלה מספריית ממשק המשתמש של צ'אקרה והשתמש בהם באופן הבא:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא {Alert, AlertIcon, AlertDescription, AlertTitle} מ'@chakra-ui/react'
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (



'הַצלָחָה'>

ברוך הבא!!!</AlertTitle>
זה נחמד שאתה כאן </AlertDescription>
 </Alert>
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

לאחר ייבוא ​​הרכיבים, ה עֵרָנִי רכיב מציג הודעה למשתמש. יש לזה סטָטוּס prop מוגדר ל-"success", מה שמציין שההודעה היא הודעת הצלחה.

ישנם שלושה סטטוסים נוספים: "מידע", "שגיאה" ו"אזהרה". ערכת הצבעים והסמל שההתראה משתמשת בהם יהיו תלויים בסטטוס ההודעה.

ה עֵרָנִי הרכיב מכיל שלושה ילדים: AlertIcon, AlertTitle, ו תיאור התראה. ה AlertIcon רכיב מציג סמל קטן ליד ההודעה, AlertTitle מציג את ההודעה הראשית, ו תיאור התראה מציג תיאור מפורט יותר של ההודעה.

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

התאמה אישית של הודעות התראה באמצעות ה- Variant Prop

כדי להתאים אישית את המראה של הודעת ההתראה, השתמש ב- גִרְסָה אַחֶרֶת אבזר של ה עֵרָנִי רְכִיב. ה גִרְסָה אַחֶרֶת prop מגדיר את המראה החזותי של הודעת ההתראה וקובע את ערכת הצבעים, הסמל ומשקל הגופן של ההודעה בהתבסס על הערך שאתה מעביר אליה.

ה גִרְסָה אַחֶרֶת prop מקבל מספר ערכי מחרוזת כגון עָדִין, מוצק, מבטא שמאלי, מבטא עליון, מבטא ימני, ו מבטא תחתון. כל ערך מייצג סגנון ויזואלי שונה של הודעת ההתראה.

הנה דוגמה לארבעה רכיבי התראה עם גרסאות שונות:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} מ'@chakra-ui/react'
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (



'מֶרְכָּז' פער='3' כיוון='טור' mt='4'>
'הַצלָחָה' variant='מוצק'>

ברוך הבא!!!</AlertTitle>
זה נחמד שאתה כאן </AlertDescription>
 </Alert>

'הַצלָחָה' variant='עָדִין'>

ברוך הבא!!!</AlertTitle>
זה נחמד שאתה כאן </AlertDescription>
 </Alert>
'הַצלָחָה' variant='מבטא עליון'>

ברוך הבא!!!</AlertTitle>
זה נחמד שאתה כאן </AlertDescription>
 </Alert>
'הַצלָחָה' variant='מבטא שמאלי'>

ברוך הבא!!!</AlertTitle>
זה נחמד שאתה כאן </AlertDescription>
 </Alert>
 </Flex>
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

עיבוד בלוק הקוד למעלה יציג התראה מותאמת אישית כמו זה:

התאמה אישית של הודעות ההתראה שלך באמצעות ה-className Prop

במקום להישאר עם מראה ברירת המחדל של הודעות ההתראה, אתה יכול להתאים אותו באמצעות ה className לִתְמוֹך. אתה משתמש ב- className prop כדי להגדיר מחלקת CSS ולהחיל את הסגנון המותאם אישית שלך על הודעת ההתראה.

לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא {Alert, AlertIcon, AlertDescription, AlertTitle} מ'@chakra-ui/react'
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (



'הַצלָחָה' className='עֵרָנִי'>

ברוך הבא!!!</AlertTitle>
זה נחמד שאתה כאן </AlertDescription>
 </Alert>
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

בדוגמה זו, לרכיב ההתראה יש מחלקת CSS "התראה". לאחר הגדרת מחלקת ה-CSS, תוכל להגדיר את הסגנונות שלך בקובץ ה-CSS שלך.

ככה:

.alert {
 צבע אדום;
 font-family: cursive;
 תצוגה: flex;
 flex-direction: עמודה;
 פער: 0.4rem;
}

הקוד למעלה יחיל את סגנונות ה-CSS על רכיב ההתראה. אם אתה מכיר את האביזרים בסגנון ממשק המשתמש של צ'אקרה, עליך להשתמש בהם כדי לסגנן הודעות התראה במקום className לִתְמוֹך.

לאחר החלת סגנונות ה-CSS לעיל, רכיב ההתראה יוצג כפי שניתן לראות בתמונה למטה:

הפעלת הודעות התראה בתגובה לאירועי משתמש

יצרת רכיב התראה שמציג באופן עקבי הודעת התראה על המסך. עם זאת, כדי לשפר את חווית המשתמש, אתה יכול להפעיל את הודעת ההתראה בתגובה לאירועים ספציפיים שמשתמש יוזם, שימוש ב-JavaScript Event Listeners. אירועים אלו יכולים לכלול לחיצה על כפתור, שליחת טופס או נתקל בשגיאה.

כדי להפעיל את הודעת ההתראה שלך בתגובה לאירועים, השתמש במצב React וב- לְהַצִיג אבזר של רכיבי ממשק המשתמש של הצ'אקרה.

לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} מ'@chakra-ui/react'
פוּנקצִיָהאפליקציה() {
const [display, setDisplay] = React.useState('אף אחד');
פוּנקצִיָהלְהוֹדִיעַ() {
 setDisplay('לְהַגמִישׁ');
 }
פוּנקצִיָהסגור() {
 setDisplay('אף אחד');
 }
לַחֲזוֹר (

"אפליקציה">
'הַצלָחָה' display={display} variant='מוצק'>

ברוך הבא!!!</AlertTitle>
זה נחמד שאתה כאן </AlertDescription>
'מוּחלָט' למעלה='6 פיקסלים' נכון='6 פיקסלים' onClick={close}/>
 </Alert>

'4'>לחץ עליי</Button>
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

בלוק קוד זה מנהל את מצב תצוגת ההודעות עם ה useState וו. הוא מגדיר את המצב ההתחלתי של תצוגת ההתראה ל"ללא", מה שמסתיר את ההתראה.

כאשר המשתמש לוחץ על לַחְצָן, זה קורא את לְהוֹדִיעַ פוּנקצִיָה. קריאה לפונקציית ההודעה משנה את הערך של ה- לְהַצִיג מצב מ"ללא" ל"להגמיש", מה שהופך את ההודעה לגלויה.

כאשר המשתמש לוחץ על כפתור close, הוא קורא לפונקציית הסגירה. זה משנה את מצב התצוגה בחזרה ל"ללא", מה שמסתיר את ההודעה.

עכשיו אתה יכול ליצור התראות הניתנות להתאמה אישית

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