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

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

Πίνακας περιεχομένων

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

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

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

 npm install @blueprintjs/core

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

 @import "normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@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:

 @import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";

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

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

 import React from "react";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";function App() {
  const popoverContent = (
    <div>
      <h3>Popover Title</h3>
      <p>This is the content inside the popover.</p>
    </div>
  );
  return (
    <div>
      <Popover2 content={popoverContent}>
        <Button intent="success" text="Click Me" />
      </Popover2>
    </div>
  );
}
export default App;

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

Πώς να μειώσετε το θόρυβο φόντου και την ηχώ στα φωνητικά μηνύματα iPhone

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

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

Μπορείτε να διαμορφώσετε το περιεχόμενο popover περνώντας ένα prop className στον κώδικα popoverContent JSX:

 const popoverContent = (
  <div className="popover">
    <h3>Popover Title</h3>
    <p>This is the content inside the popover.</p>
  </div>
);

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

 .popover {
  padding: 1rem;
  background-color: #e2e2e2;
  font-family: cursive;
}

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

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

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

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

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

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

 .custom-popover {
  background-color: #e2e2e2;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  border-radius: 12px;
  padding: 1rem;
}

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

 <Popover2
content={popoverContent}
placement="bottom-end"
popoverClassName="custom-popover"
minimal={true}
>
<Button intent="success" text="Click Me" />
</Popover2>

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

Καλύτερος On-premise Password Manager για την επιχείρησή σας – Passwork

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

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

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

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

 import React from "react";
import { Alert, Button } from "@blueprintjs/core";function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleOpen = () => {
    setIsOpen(true);
  };
  const handleClose = () => {
    setIsOpen(false);
  };
  return (
    <div>
      <Alert isOpen={isOpen} onClose={handleClose} confirmButtonText="Close">
        <p>This is an alert message</p>
      </Alert>
      <Button text="Click Me" intent="success" onClick={handleOpen} />
    </div>
  );
}
export default App;

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

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

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

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

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

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

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

Πώς να προσαρμόσετε την αρχική οθόνη του iPhone σας με γραφικά στοιχεία και εικονίδια

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

 import React from "react";
import { OverlayToaster, Button } from "@blueprintjs/core";const toasterInstance = OverlayToaster.create({ position: "top-right" });
function App() {
  const showToast = () => {
    toasterInstance.show({
      message: "This is a toast",
      intent: "primary",
      timeout: 3000,
      isCloseButtonShown: false,
      icon: "bookmark",
    });
  };
  return (
    <div>
      <Button text="Click Me" intent="success" onClick={showToast} />
    </div>
  );
}
export default App;

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

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

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

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

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

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

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

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

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