Δημιουργία Popovers, Alerts και Toasts με το Blueprint UI στο React

Το Blueprint UI είναι μια δημοφιλής εργαλειοθήκη React UI που παρέχει ένα σύνολο επαναχρησιμοποιήσιμων στοιχείων και στυλ για τη δημιουργία σύγχρονων εφαρμογών Ιστού. Ένα από τα βασικά χαρακτηριστικά του Blueprint UI είναι η υποστήριξή του για δημιουργία popover, ειδοποιήσεις και τοστ, τα οποία είναι απαραίτητα στοιχεία για την εμφάνιση πληροφοριών και σχολίων στους χρήστες.

Εγκατάσταση του Blueprint UI

Για να ξεκινήσετε με το Blueprint UI, θα πρέπει πρώτα να το εγκαταστήσετε. Μπορείτε να το κάνετε αυτό χρησιμοποιώντας οποιονδήποτε διαχειριστή πακέτων της επιλογής σας.

Για να το εγκαταστήσετε χρησιμοποιώντας npm, ο διαχειριστής πακέτων JavaScript, εκτελέστε την ακόλουθη εντολή στο τερματικό σας:

npm εγκατάσταση @blueprintjs/core

Μετά την εγκατάσταση του Blueprint UI, πρέπει να εισαγάγετε τα αρχεία CSS από τη βιβλιοθήκη:

@εισαγωγή"normalize.css";
@εισαγωγή





instagram viewer

"@blueprintjs/core/lib/css/blueprint.css";
@εισαγωγή"@blueprintjs/icons/lib/css/blueprint-icons.css";

Με την εισαγωγή αυτών των αρχείων, θα μπορείτε να ενσωματώσετε τα στυλ διεπαφής χρήστη Blueprint με τα στοιχεία που προσφέρει το Blueprint UI.

Δημιουργία Popover με χρήση του Blueprint UI

Τα popovers είναι συμβουλές εργαλείων που εμφανίζονται όταν ο χρήστης τοποθετεί τον δείκτη του ποντικιού πάνω ή κάνει κλικ σε ένα στοιχείο. Παρέχουν πρόσθετες πληροφορίες ή επιλογές στον χρήστη.

Για να δημιουργήσετε popover στην εφαρμογή React χρησιμοποιώντας το Blueprint UI, πρέπει να εγκαταστήσετε το Blueprint UI Popover2 συστατικό.

Για να το κάνετε αυτό, εκτελέστε τον ακόλουθο κώδικα στο τερματικό σας:

npm install --save @blueprintjs/popover2

Βεβαιωθείτε ότι έχετε εισαγάγει το φύλλο στυλ πακέτου στο αρχείο CSS:

@εισαγωγή"@blueprintjs/popover2/lib/css/blueprint-popover2.css";

Μετά την εισαγωγή του φύλλου στυλ, μπορείτε να χρησιμοποιήσετε το Popover2 στοιχείο για τη δημιουργία popover στην εφαρμογή σας.

Για παράδειγμα:

εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή { Κουμπί } από"@blueprintjs/core";
εισαγωγή { Popover2 } από"@blueprintjs/popover2";
λειτουργίαApp() {
συνθ popoverContent = (



Τίτλος Popover</h3>


Αυτό είναι το περιεχόμενο μέσα στο popover.</p>
 </div>
 );
ΕΠΙΣΤΡΟΦΗ (




"επιτυχία" κείμενο="Κάντε κλικ σε εμένα" />
 </Popover2>
 </div>
 );
}

εξαγωγήΠροκαθορισμένο Εφαρμογή?

Αυτός ο κώδικας δημιουργεί ένα popover χρησιμοποιώντας το Popover2 συστατικό. Ορίζει επίσης α Περιεχόμενο popover μεταβλητή, η οποία περιέχει τον κώδικα JSX για το περιεχόμενο popover.

ο Popover2 συστατικό παίρνει το Περιεχόμενο popover ως η αξία του περιεχόμενο στήριγμα. ο περιεχόμενο prop καθορίζει το περιεχόμενο που εμφανίζεται στο popover. Εδώ, το Popover2 περιτυλίγματα συστατικού α Κουμπί συστατικό. Αυτό προκαλεί την εμφάνιση του popover όταν κάνετε κλικ στο κουμπί.

Το popover φαίνεται απλό, όπως φαίνεται εδώ:

Μπορείτε να διαμορφώσετε το περιεχόμενο popover περνώντας a όνομα τάξης στήριγμα στο Περιεχόμενο popover Κωδικός JSX:

συνθ popoverContent = (
"popover">
Τίτλος Popover</h3>


Αυτό είναι το περιεχόμενο μέσα στο popover.</p>
 </div>
);

Στη συνέχεια, μπορείτε να ορίσετε την κλάση CSS στο αρχείο CSS:

.popover {
υλικό παραγεμίσματος: 1rem;
χρώμα του φόντου: #e2e2e2;
γραμματοσειρά-οικογένεια: ρέων;
}

Τώρα το popover θα πρέπει να φαίνεται λίγο καλύτερο:

ο Popover2 Το στοιχείο έχει κάποια στηρίγματα που θα σας βοηθήσουν να το διαμορφώσετε ώστε να ταιριάζει στις ανάγκες σας. Μερικά από αυτά τα στηρίγματα είναι popoverClassName, στην αλληλεπίδραση, είναι ανοιχτό, ελάχιστος, και τοποθέτηση.

ο τοποθέτηση Το prop καθορίζει την προτιμώμενη θέση του popover σε σχέση με το στοιχείο στόχο. Οι διαθέσιμες τιμές του είναι:

• αυτο
• αυτόματη εκκίνηση
• αυτόματο τέλος
• μπλουζα
• top-start
• top-end
• κάτω μέρος
• κάτω-αρχή
• κάτω-άκρο
• σωστά
• δεξιά εκκίνηση
• δεξιά-άκρο
• αριστερά
• αριστερά-εκκίνηση
• αριστερό άκρο

Με την popoverClassName, μπορείτε να ορίσετε ένα όνομα κλάσης CSS για το στοιχείο popover. Θα δημιουργήσετε πρώτα μια κλάση CSS στο αρχείο σας CSS για να χρησιμοποιήσετε το prop.

Για παράδειγμα:

.έθιμο-popover {
χρώμα του φόντου: #e2e2e2;
κουτί-σκιά: 0 10px 15px-3 εικονοστοιχείαrgb(0 0 0 / 0.1);
σύνορα-ακτίνα: 12px;
υλικό παραγεμίσματος: 1rem;
}

Αφού δημιουργήσετε την κλάση CSS, χρησιμοποιήστε το popoverClassName υποστηρίξτε για να εφαρμόσετε το προσαρμοσμένο στυλ στο στοιχείο Popover2:

 περιεχόμενο={popoverContent}
 τοποθέτηση="κάτω άκρο"
 popoverClassName="custom-popover"
 ελάχιστο={αληθής}
>
"επιτυχία" κείμενο="Κάντε κλικ σε εμένα" />
</Popover2>

ο ελάχιστος Το prop ελέγχει το στυλ του popover. Το στηρίγμα δέχεται μια τιμή boolean. Εάν οριστεί σε true, το popover θα έχει ελάχιστο στυλ, χωρίς βέλος και μια απλή εμφάνιση κουτιού.

Δημιουργία ειδοποιήσεων

Οι ειδοποιήσεις είναι ειδοποιήσεις που εμφανίζονται στην οθόνη για να ενημερώσουν τον χρήστη για σημαντικές πληροφορίες ή ενέργειες. Χρησιμοποιούνται συνήθως για την εμφάνιση μηνυμάτων σφάλματος, μηνυμάτων επιτυχίας ή προειδοποιήσεων.

Η δημιουργία ειδοποιήσεων στο Blueprint UI είναι παρόμοια με δημιουργία ειδοποιήσεων χρησιμοποιώντας το Chakra UI. Θα χρησιμοποιήσετε το στοιχείο Alert για να δημιουργήσετε μια ειδοποίηση στην εφαρμογή React χρησιμοποιώντας το Blueprint UI.

Εδώ είναι ένα παράδειγμα:

εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή { Ειδοποίηση, κουμπί } από"@blueprintjs/core";
λειτουργίαApp() {
συνθ [isOpen, setIsOpen] = React.useState(ψευδής);
συνθ handleOpen = () => {
 setIsOpen(αληθής);
 };
συνθ λαβήΚλείσιμο = () => {
 setIsOpen(ψευδής);
 };
ΕΠΙΣΤΡΟΦΗ (



"Κλείσε">
Αυτό είναι ένα μήνυμα ειδοποίησης</p>
 </Alert>
"Κάντε κλικ σε εμένα" πρόθεση="επιτυχία" onClick={handleOpen} />
 </div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Αυτό το παράδειγμα δείχνει πώς πρέπει να εισαγάγετε το Συναγερμός συστατικό από το @blueprintjs/core πακέτο. ο Συναγερμός στοιχείο αποδίδει ένα μήνυμα ειδοποίησης στην οθόνη. Χρειάζονται επίσης τρία στηρίγματα: είναι ανοιχτό, onClose, και επιβεβαίωσηButtonText.

ο είναι ανοιχτό Το prop καθορίζει εάν η ειδοποίηση είναι ορατή ή όχι. Ρυθμίστε το σε true για να εμφανιστεί η ειδοποίηση και false για να την αποκρύψετε. ο onClose Το prop είναι μια συνάρτηση επανάκλησης που εκτελείται όταν ένας χρήστης κλείνει την ειδοποίηση.

Τέλος, το επιβεβαίωσηButtonText Το prop καθορίζει το κείμενο που εμφανίζεται στο κουμπί επιβεβαίωσης.

Η ειδοποίηση ειδοποίησης σε αυτό το παράδειγμα θα μοιάζει με αυτό:

Δημιουργία τοστ με το Blueprint UI

Τα τοστ είναι ειδοποιήσεις που εμφανίζονται στην οθόνη για να ενημερώσουν τον χρήστη για σημαντικές πληροφορίες ή γεγονότα. Μοιάζουν με τις ειδοποιήσεις, αλλά είναι συνήθως λιγότερο παρεμβατικές και εξαφανίζονται γρήγορα.

Για να δημιουργήσετε ένα τοστ στην εφαρμογή React χρησιμοποιώντας το Blueprint UI, χρησιμοποιήστε το OverlayToaster συστατικό. ο OverlayToaster Το στοιχείο δημιουργεί ένα στιγμιότυπο Toaster που στη συνέχεια χρησιμοποιείται για τη δημιουργία μεμονωμένων τοστ.

Για παράδειγμα:

εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή { OverlayToaster, Button } από"@blueprintjs/core";
συνθ toasterInstance = OverlayToaster.create({ θέση: "επάνω δεξιά" });
λειτουργίαApp() {
συνθ showToast = () => {
 toasterInstance.show({
 μήνυμα: "Αυτό είναι ένα τοστ",
 πρόθεση: "πρωταρχικός",
 τέλος χρόνου: 3000,
 isCloseButtonShown: ψευδής,
 εικόνισμα: "σελιδοδείκτης",
 });
 };
ΕΠΙΣΤΡΟΦΗ (



"Κάντε κλικ σε εμένα" πρόθεση="επιτυχία" onClick={showToast} />
 </div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Το μπλοκ κώδικα παραπάνω χρησιμοποιεί το OverlayToaster.create μέθοδος για τη δημιουργία του στιγμιότυπου τοστιέρα και καθορίζει τη θέση του χρησιμοποιώντας το θέση στήριγμα.

Καθορίζει επίσης τη λειτουργία showToast. Αυτή η λειτουργία χρησιμοποιεί το προβολή μέθοδος του τοστιέραΠαράδειγμα για να εμφανίσετε το τοστ όταν καλέσετε. ο προβολή μέθοδος παίρνει ένα αντικείμενο με το μήνυμα, πρόθεση, τέλος χρόνου, isCloseButtonShown, και εικόνισμα στηρίγματα.

ο μήνυμα prop καθορίζει το περιεχόμενο κειμένου του τοστ, ενώ το πρόθεση Το prop καθορίζει τον τύπο του τοστ. Το στυλ του τοστ θα ποικίλλει ανάλογα με την αξία του.

Μπορείτε να ελέγξετε πόσο καιρό θα εμφανίζεται η ειδοποίηση τοστ χρησιμοποιώντας το τέλος χρόνου στήριγμα. ο εικόνισμα Το prop καθορίζει ένα στοιχείο εικονιδίου που θα εμφανίζεται στο τοστ. Με την isCloseButtonShown στήριγμα, μπορείτε να ελέγξετε αν εμφανίζεται το κουμπί κλεισίματος στο τοστ.

Το μπλοκ κώδικα παραπάνω θα δημιουργήσει ένα όμορφο τοστ όταν κάνετε κλικ στο κουμπί, όπως φαίνεται στην παρακάτω εικόνα.

Αν θέλετε να δημιουργήσετε ελκυστικές ειδοποιήσεις τοστ στην εφαρμογή React, το Blueprint UI είναι μια εξαιρετική επιλογή. Παρέχει ένα ευρύ φάσμα προκαθορισμένων στοιχείων που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε ειδοποιήσεις που ταιριάζουν με το στυλ της εφαρμογής σας.

Ωστόσο, εάν εργάζεστε σε ένα μικρό έργο που δεν απαιτεί όλες τις δυνατότητες του Blueprint UI, Το React Toastify είναι μια ελαφριά εναλλακτική λύση για τη δημιουργία όμορφων ειδοποιήσεων.

Βελτίωση της εμπειρίας χρήστη με Toasts, Popovers και Alerts

Έχετε μάθει πώς να δημιουργείτε popover, ειδοποιήσεις και τοστ στην εφαρμογή React χρησιμοποιώντας το Blueprint UI. Αυτά τα στοιχεία είναι απαραίτητα για την παροχή πληροφοριών και σχολίων στους χρήστες και μπορούν να βελτιώσουν σημαντικά την εμπειρία χρήστη της εφαρμογής σας. Μπορείτε εύκολα να δημιουργήσετε αυτά τα στοιχεία χρησιμοποιώντας τις πληροφορίες που έχετε αποκτήσει με ελάχιστη προσπάθεια και προσαρμογή.