Δεν χρειάζεται να βασίζεστε σε πακέτο τρίτου μέρους για να δημιουργήσετε ένα στοιχείο ειδοποίησης. Δείτε πώς μπορείτε να το φτιάξετε μόνοι σας.
Υπάρχουν πολλά πακέτα τρίτων που είναι διαθέσιμα στο React που μπορούν να σας βοηθήσουν να δημιουργήσετε ένα στοιχείο ειδοποίησης. Ωστόσο, εάν θέλετε απλώς ένα απλό στοιχείο ειδοποίησης, μπορεί να θέλετε να δημιουργήσετε το δικό σας για να αποφύγετε την προσθήκη περιττών εξαρτήσεων στην εφαρμογή σας.
Ρύθμιση του Έργου
Εσύ θα χρησιμοποιήστε το Vite για να ρυθμίσετε την εφαρμογή React. Το Vite είναι ένα εργαλείο κατασκευής που σας επιτρέπει να δημιουργήσετε γρήγορα ένα έργο React.
Για να ξεκινήσετε, χρησιμοποιήστε τον διαχειριστή πακέτων νήματος για να δημιουργήσετε ένα νέο έργο Vite εκτελώντας την παρακάτω εντολή.
νήμα δημιουργία βιτέ
Η εντολή θα σας ζητήσει να εισαγάγετε ένα όνομα έργου. Εισαγάγετε το όνομα του έργου και πατήστε Enter. Στη συνέχεια, θα σας ζητήσει να επιλέξετε ένα πλαίσιο. Επιλέγω αντιδρώ και πατήστε Enter. Τέλος, θα σας ζητήσει να επιλέξετε μια παραλλαγή, επιλέξτε JavaScript και μετά πατήστε Enter.
Ακολουθούν οι διαμορφώσεις που θα χρησιμοποιήσει αυτό το σεμινάριο:
Αφού το Vite δημιουργήσει το έργο, μεταβείτε στον φάκελο του έργου και ανοίξτε τον χρησιμοποιώντας ένα πρόγραμμα επεξεργασίας κώδικα.
Στη συνέχεια, μπορείτε να ξεκινήσετε τον διακομιστή ανάπτυξης εκτελώντας την ακόλουθη εντολή.
νήματα dev
Αυτό θα ανοίξει τη νέα σας εφαρμογή React στο προεπιλεγμένο πρόγραμμα περιήγησής σας στο http://localhost: 5173/.
Σχεδιασμός του στοιχείου ειδοποίησης
Για να δημιουργηθεί ένα ευέλικτο στοιχείο ειδοποιήσεων, πρέπει να μπορεί να χειρίζεται διαφορετικούς τύπους ειδοποιήσεων με διαφορετικούς τίτλους, περιγραφές και στυλ. Για παράδειγμα, πρέπει να αποδώσει μια ειδοποίηση προειδοποίησης, επιτυχίας και σφάλματος.
Ακολουθούν διάφορες παραλλαγές που θα πρέπει να μπορεί να αποδίδει το στοιχείο ειδοποίησης.
Μπορείτε να το επιτύχετε μεταβιβάζοντας στηρίγματα στο στοιχείο που καθορίζει τον τύπο της ειδοποίησης προς απόδοση, τον τίτλο και το κείμενο περιγραφής. Χρησιμοποιώντας αυτά τα στηρίγματα, μπορείτε να προσαρμόσετε το στοιχείο και να το χρησιμοποιήσετε ξανά σε όλη την εφαρμογή σας με ελάχιστη προσπάθεια. Εάν χρειάζεστε μια ανανέωση στα στηρίγματα, εδώ είναι ένα άρθρο που εξηγεί πώς να χρησιμοποιήσετε τα props στο React.
Δημιουργία του στοιχείου ειδοποίησης
Στο src φάκελο, δημιουργήστε ένα νέο αρχείο με το όνομα Notification.jsx και προσθέστε τον παρακάτω κώδικα.
εξαγωγήΠροκαθορισμένολειτουργίαΓνωστοποίηση({τύπος, τίτλος, περιγραφή}) {
ΕΠΙΣΤΡΟΦΗ (
{/* Περιεχόμενο ειδοποίησης */}
</div>
)
}
Αυτός ο κώδικας δημιουργεί ένα λειτουργικό στοιχείο που ονομάζεται Γνωστοποίηση με τρία στηρίγματα: τύπος, τίτλος, και περιγραφή. Θα χρησιμοποιήσετε αυτά τα στηρίγματα για να προσαρμόσετε το στυλ και το περιεχόμενο της ειδοποίησης.
Από τη σχεδίαση, το στοιχείο έχει μερικά εικονίδια, δηλαδή πληροφορίες, και ένα εικονίδιο σταυρού. Μπορείς λήψη εικονιδίων δωρεάν για χρήση ή χρησιμοποιήστε ένα στοιχείο εικονιδίου από ένα πακέτο όπως π.χ React-εικονίδια. Αυτό το σεμινάριο θα χρησιμοποιήσει React-εικονίδια οπότε εγκαταστήστε το εκτελώντας την παρακάτω εντολή.
νήμα προσθήκη αντιδρά-εικονίδια
Στη συνέχεια, εισαγάγετε τα εικονίδια στο επάνω μέρος του Γνωστοποίηση συστατικό.
εισαγωγή { RxCross2, RxInfoCircled } από"react-icons/rx"
Τώρα, μπορείτε να τροποποιήσετε το στοιχείο για να χρησιμοποιήσετε τα εικονίδια, τον τίτλο και τις τιμές στηρίγματος περιγραφής για να δημιουργήσετε το περιεχόμενο της ειδοποίησης.
εξαγωγήΠροκαθορισμένολειτουργίαΓνωστοποίηση({τύπος, τίτλος, περιγραφή}) {
ΕΠΙΣΤΡΟΦΗ (
{τίτλος}</div>
{περιγραφή}</div>
</div>
</div>
</div>
)
}
Το επόμενο βήμα είναι να το διαμορφώσετε ανάλογα με τον τύπο που μεταβιβάστηκε.
Μια προσέγγιση που μπορείτε να ακολουθήσετε είναι να ορίσετε κλάσεις CSS για κάθε τύπο ειδοποίησης που θέλετε να εμφανίσετε. Στη συνέχεια, μπορείτε να εφαρμόσετε υπό όρους την κατάλληλη κλάση με βάση τον τύπο που μεταβιβάζεται.
Για να ξεκινήσετε, δημιουργήστε ένα νέο αρχείο που ονομάζεται κοινοποίηση.css και εισάγετέ το Notification.jsx προσθέτοντας τον παρακάτω κώδικα στην κορυφή.
εισαγωγή "./notification.css"
Μετά μέσα κοινοποίηση.css ορίστε τα βασικά στυλ για το στοιχείο ειδοποίησης:
.Γνωστοποίηση {
απεικόνιση: καλώδιο;
flex-direction: σειρά;
στοίχιση-στοιχεία: flex-start;
υλικό παραγεμίσματος: 8px;
}
.notification__left {
απεικόνιση: καλώδιο;
flex-direction: σειρά;
υλικό παραγεμίσματος: 0px;
χάσμα: 8px;
περιθώριο-δεξιά: 24px;
}
.notification__content {
απεικόνιση: καλώδιο;
flex-direction: στήλη;
στοίχιση-στοιχεία: flex-start;
υλικό παραγεμίσματος: 0px;
}
.notification__title {
γραμματοσειρά-οικογένεια: "μεταξύ";
στυλ γραμματοσειράς: κανονικός;
βάρος γραμματοσειράς: 500;
μέγεθος γραμματοσειράς: 14px;
}
.notification__description {
γραμματοσειρά-οικογένεια: "μεταξύ";
στυλ γραμματοσειράς: κανονικός;
βάρος γραμματοσειράς: 400;
μέγεθος γραμματοσειράς: 12px;
υλικό παραγεμίσματος: 0;
}
Στη συνέχεια, μπορείτε να ορίσετε τα στυλ για τους διαφορετικούς τύπους ειδοποιήσεων προσθέτοντας τον ακόλουθο κώδικα στο αρχείο CSS.
.notification__success {
Ιστορικό: #f6fef9;
σύνορο: 1pxστερεός#2f9461;
σύνορα-ακτίνα: 8px;
}
.notification__error {
Ιστορικό: #fffbfa;
σύνορο: 1pxστερεός#cd3636;
σύνορα-ακτίνα: 8px;
}
.notification__warning {
Ιστορικό: #fffcf5;
σύνορο: 1pxστερεός#c8811a;
σύνορα-ακτίνα: 8px;
}
Ο παραπάνω κώδικας διαμορφώνει το στυλ του κοντέινερ ειδοποιήσεων με βάση τον τύπο που μεταβιβάστηκε.
Για να προσαρμόσετε τον τίτλο, χρησιμοποιήστε τα παρακάτω στυλ.
.notification__title__success {
χρώμα: #2f9461;
}
.notification__title__warning {
χρώμα: #c8811a;
}
.notification__title__error {
χρώμα: #cd3636;
}
Για το προσαρμοσμένο κείμενο περιγραφής, χρησιμοποιήστε αυτά τα στυλ.
.notification__description__success {
χρώμα: #53b483;
}
.notification__description__warning {
χρώμα: #e9a23b;
}
.notification__description__error {
χρώμα: #f34141;
}
Και για τα εικονίδια, χρησιμοποιήστε τις παρακάτω κλάσεις.
.notification_icon_error {
χρώμα: #cd3636;
}
.notification__icon__success {
χρώμα: #2f9461;
}
.notification__icon__warning {
χρώμα: #c8811a;
}
Στη συνέχεια, στο Γνωστοποίηση συστατικό, μπορείτε να εφαρμόσετε υπό όρους την κατάλληλη κλάση με βάση το τύπος στήριγμα, όπως αυτό:
εξαγωγήΠροκαθορισμένολειτουργίαΓνωστοποίηση({τύπος, τίτλος, περιγραφή}) {
ΕΠΙΣΤΡΟΦΗ (
`ειδοποίηση ειδοποίησης__${type}`}>
"ειδοποίηση__αριστερά".}>
`ειδοποίηση__εικονίδιο__${type}`}/>
"notification__content">
`notification__title notification__title__${type}`}>{τίτλος}</div>
`notification__description notification__description__${type}`}>{περιγραφή}</div>
</div>
</div>
`ειδοποίηση__εικονίδιο__${type}`}/>
</div>
)
}
Σε αυτό το στοιχείο, ορίζετε δυναμικά την κλάση ανάλογα με τον τύπο, όπως π.χ ειδοποίηση__επιτυχία ή ειδοποίηση__σφάλμα.
Για να το δείτε στην πράξη, εισαγάγετε το στοιχείο Ειδοποίηση App.jsx και χρησιμοποιήστε το ως εξής:
εισαγωγή Γνωστοποίηση από'./Γνωστοποίηση'λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
<>
τύπος="επιτυχία"
τίτλος="Η εργασία ολοκληρώθηκε"
περιγραφή="Η εργασία σας ολοκληρώθηκε με επιτυχία."
/>
</>
)
}
εξαγωγήΠροκαθορισμένο App
Τώρα, μπορείτε να περάσετε έναν διαφορετικό τύπο στο Γνωστοποίηση στοιχείο και να αποδώσει μια κατάλληλη ειδοποίηση που ταιριάζει με το μήνυμα.
Αυτό είναι απαραίτητο για μια καλή εμπειρία χρήστη, επειδή οι χρήστες έχουν έρθει να συσχετίσουν διαφορετικά χρώματα και στυλ με διαφορετικά σενάρια και είναι σημαντικό να χρησιμοποιούνται με συνέπεια αυτές οι συσχετίσεις. Για παράδειγμα, θα ήταν μπερδεμένο να ενημερώσετε έναν χρήστη ότι ανέβασε με επιτυχία μια φωτογραφία σε ένα κόκκινο πλαίσιο ειδοποιήσεων. Μπορεί να πιστεύουν ότι η μεταφόρτωση απέτυχε, ακόμα κι αν ήταν επιτυχής.
Προσθήκη διαδραστικότητας στο στοιχείο ειδοποιήσεων
Έχετε μάθει πώς μπορείτε να χρησιμοποιήσετε στηρίγματα για να δημιουργήσετε ένα προσαρμόσιμο στοιχείο ειδοποίησης. Για να το προχωρήσετε ακόμη περισσότερο, μπορείτε να προσθέσετε μεταβάσεις σε αυτό το στοιχείο για να το κάνετε πιο ελκυστικό. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε κινούμενα σχέδια CSS για να σύρετε το στοιχείο ειδοποίησης στην οθόνη και να το σύρετε έξω αφού παρέλθει μια ορισμένη διάρκεια.