Λάβετε συνεπείς, ελκυστικές ειδοποιήσεις στον ιστότοπό σας στο React με αυτήν τη βιβλιοθήκη.
Οι ειδοποιήσεις είναι μηνύματα που εμφανίζονται σε έναν ιστότοπο/εφαρμογή Ιστού για να μεταφέρουν σημαντικές πληροφορίες σε έναν χρήστη. Διαδραματίζουν καθοριστικό ρόλο στις διαδικτυακές εφαρμογές. Υπάρχουν πολλοί τρόποι δημιουργίας ειδοποιήσεων στο React. Το Chakra UI κάνει τη διαδικασία εύκολη και αποτελεσματική.
Το Chakra UI είναι μια δημοφιλής βιβλιοθήκη στοιχείων για το React που παρέχει ένα σύνολο προσαρμόσιμων και προσβάσιμων στοιχείων διεπαφής χρήστη.
Εγκατάσταση του Chakra UI
Για να χρησιμοποιήσετε τη βιβλιοθήκη του Chakra UI, μία από τις πολλές βιβλιοθήκες συστατικών αντιδράσεων, πρέπει πρώτα να το εγκαταστήσετε. Μπορείτε να το εγκαταστήσετε εκτελώντας την ακόλουθη εντολή τερματικού στον κατάλογο του έργου node.js:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Εναλλακτικά, μπορείτε να εγκαταστήσετε το Chakra UI χρησιμοποιώντας το Yarn. Για να το κάνετε αυτό, εκτελέστε την ακόλουθη εντολή:
νήμα προσθήκη @chakra-ui/react @emotion/react @emotion/στυλ framer-motion
Ρύθμιση του Chakra UI
Αφού εγκαταστήσετε το Chakra UI, πρέπει να το κάνετε διαθέσιμο στην εφαρμογή σας. Για να το κάνετε αυτό, πρέπει να ρυθμίσετε το ChakraProvider συστατικό.
ο ChakraProvider Το στοιχείο είναι ένα στοιχείο ανώτατου επιπέδου που παρέχει η βιβλιοθήκη UI του Chakra. Αναδιπλώνει ολόκληρη την εφαρμογή και παρέχει το θέμα και το στυλ στυλ σε όλα τα στοιχεία της.
Για να ρυθμίσετε το ChakraProvider συστατικό, εισάγετέ το από @chakra-ui/react:
εισαγωγή Αντιδρώ από'αντιδρώ'
εισαγωγή ReactDOM από'react-dom/client'
εισαγωγή App από'./Εφαρμογή'
εισαγωγή { ChakraProvider } από'@chakra-ui/react'
ReactDOM.createRoot(έγγραφο.getElementById('ρίζα') όπως και HTMLElement).render(
</ChakraProvider>
</React.StrictMode>
)
ο ChakraProvider υποστηρίζει συστατικό α θέμα στήριγμα. Περνώντας το θέμα στήριγμα στο ChakraProvider Το στοιχείο διασφαλίζει ότι όλα τα στοιχεία διεπαφής χρήστη Chakra στην εφαρμογή μπορούν να έχουν πρόσβαση στο παρεχόμενο θέμα και το πλαίσιο στυλ. ο θέμα Το στήριγμα είναι προαιρετικό. Εάν δεν το περάσετε, η διεπαφή χρήστη του Chakra θα χρησιμοποιήσει ένα προεπιλεγμένο θέμα.
Δημιουργία προσαρμοσμένης ειδοποίησης με χρήση στοιχείων ειδοποίησης
Το Chakra UI προσφέρει τέσσερα στοιχεία που σας επιτρέπουν να δημιουργήσετε μια προσαρμοσμένη ειδοποίηση: Συναγερμός, Εικονίδιο ειδοποίησης, AlertTitle, και AlertDescription.
Για να δημιουργήσετε το μήνυμα ειδοποίησης, εισαγάγετε αυτά τα στοιχεία από τη βιβλιοθήκη Chakra UI και χρησιμοποιήστε τα ως εξής:
εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή {Alert, AlertIcon, AlertDescription, AlertTitle} από'@chakra-ui/react'λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ ('επιτυχία'> Καλώς ήρθες!!!</AlertTitle> Χαίρομαι που είσαι εδώ</AlertDescription>
</Alert>
</div>
)
}
εξαγωγήΠροκαθορισμένο App
Μετά την εισαγωγή των εξαρτημάτων, το Συναγερμός στοιχείο εμφανίζει ένα μήνυμα στον χρήστη. Εχει ένα κατάσταση το prop ορίστηκε σε "επιτυχία", το οποίο υποδεικνύει ότι το μήνυμα είναι μήνυμα επιτυχίας.
Υπάρχουν τρεις άλλες καταστάσεις: "πληροφορίες", "σφάλμα" και "προειδοποίηση". Ο συνδυασμός χρωμάτων και το εικονίδιο που χρησιμοποιεί η ειδοποίηση θα εξαρτηθούν από την κατάσταση του μηνύματος.
ο Συναγερμός Το συστατικό περιέχει τρία παιδιά: Εικονίδιο ειδοποίησης, AlertTitle, και AlertDescription. ο Εικονίδιο ειδοποίησης Το στοιχείο εμφανίζει ένα μικρό εικονίδιο δίπλα στο μήνυμα, AlertTitle εμφανίζει το κύριο μήνυμα και AlertDescription εμφανίζει μια πιο λεπτομερή περιγραφή του μηνύματος.
Το προηγούμενο μπλοκ κώδικα θα δημιουργήσει μια ειδοποίηση που μοιάζει με αυτό:
Προσαρμογή μηνυμάτων ειδοποίησης με χρήση του Variant Prop
Για να προσαρμόσετε την εμφάνιση του μηνύματος ειδοποίησης, χρησιμοποιήστε το παραλαγή στήριγμα του Συναγερμός συστατικό. ο παραλαγή Το prop καθορίζει την οπτική εμφάνιση του μηνύματος ειδοποίησης και καθορίζει το συνδυασμό χρωμάτων, το εικονίδιο και το βάρος της γραμματοσειράς του μηνύματος με βάση την τιμή που μεταβιβάζετε σε αυτό.
ο παραλαγή Το prop δέχεται πολλές τιμές συμβολοσειράς όπως διακριτικό, στερεός, αριστερή προφορά, κορυφαία προφορά, δεξιά προφορά, και κάτω-προφορά. Κάθε τιμή αντιπροσωπεύει ένα διαφορετικό οπτικό στυλ του μηνύματος ειδοποίησης.
Ακολουθεί ένα παράδειγμα τεσσάρων στοιχείων ειδοποίησης με διαφορετικές παραλλαγές:
εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} από'@chakra-ui/react'λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ ('κέντρο' κενό='3' κατεύθυνση='στήλη' mt='4'> 'επιτυχία' παραλλαγή='στερεός'> Καλώς ήρθες!!!</AlertTitle> Χαίρομαι που είσαι εδώ</AlertDescription>
</Alert>
'επιτυχία' παραλλαγή='διακριτικό'> Καλώς ήρθες!!!</AlertTitle> Χαίρομαι που είσαι εδώ</AlertDescription>
</Alert>
'επιτυχία' παραλλαγή=«κορυφαία προφορά»> Καλώς ήρθες!!!</AlertTitle> Χαίρομαι που είσαι εδώ</AlertDescription>
</Alert>
'επιτυχία' παραλλαγή="αριστερή προφορά"> Καλώς ήρθες!!!</AlertTitle> Χαίρομαι που είσαι εδώ</AlertDescription>
</Alert>
</Flex>
</div>
)
}
εξαγωγήΠροκαθορισμένο App
Η απόδοση του μπλοκ κώδικα παραπάνω θα εμφανίσει μια προσαρμοσμένη ειδοποίηση όπως αυτή:
Προσαρμογή των μηνυμάτων ειδοποίησης χρησιμοποιώντας το className Prop
Αντί να τηρείτε την προεπιλεγμένη εμφάνιση των μηνυμάτων ειδοποίησης, μπορείτε να την προσαρμόσετε χρησιμοποιώντας το όνομα τάξης στήριγμα. Χρησιμοποιείτε το όνομα τάξης για να ορίσετε μια κλάση CSS και να εφαρμόσετε το προσαρμοσμένο στυλ σας στο μήνυμα ειδοποίησης.
Για παράδειγμα:
εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή {Alert, AlertIcon, AlertDescription, AlertTitle} από'@chakra-ui/react'λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ ('επιτυχία' className='συναγερμός'> Καλώς ήρθες!!!</AlertTitle> Χαίρομαι που είσαι εδώ</AlertDescription>
</Alert>
</div>
)
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?
Σε αυτό το παράδειγμα, το στοιχείο ειδοποίησης έχει μια κλάση CSS "ειδοποίηση". Αφού ορίσετε την κλάση CSS, μπορείτε να ορίσετε τα στυλ σας στο αρχείο CSS.
Όπως έτσι:
.συναγερμός {
χρώμα: κόκκινο;
γραμματοσειρά-οικογένεια: cursive;
οθόνη: flex;
flex-direction: στήλη;
χάσμα: 0.4rem;
}
Ο παραπάνω κώδικας θα εφαρμόσει τα στυλ CSS στο στοιχείο ειδοποίησης. Εάν είστε εξοικειωμένοι με τα στηρίγματα στυλ Chakra UI, θα πρέπει να τα χρησιμοποιήσετε για να διαμορφώσετε τα μηνύματα ειδοποίησης αντί για το όνομα τάξης στήριγμα.
Μετά την εφαρμογή των παραπάνω στυλ CSS, το στοιχείο ειδοποίησης θα εμφανιστεί όπως φαίνεται στην παρακάτω εικόνα:
Ενεργοποίηση μηνυμάτων ειδοποίησης ως απόκριση σε συμβάντα χρήστη
Έχετε δημιουργήσει ένα στοιχείο ειδοποίησης που εμφανίζει με συνέπεια ένα μήνυμα ειδοποίησης στην οθόνη. Ωστόσο, για να βελτιώσετε την εμπειρία χρήστη, μπορείτε να ενεργοποιήσετε το μήνυμα ειδοποίησης ως απόκριση σε συγκεκριμένα συμβάντα που ξεκινά ένας χρήστης, χρησιμοποιώντας JavaScript Listeners συμβάντων. Αυτά τα συμβάντα μπορεί να περιλαμβάνουν κλικ σε ένα κουμπί, υποβολή μιας φόρμας ή εμφάνιση σφάλματος.
Για να ενεργοποιήσετε το μήνυμα ειδοποίησης ως απόκριση σε συμβάντα, χρησιμοποιήστε την κατάσταση React και το απεικόνιση στήριγμα των στοιχείων της διεπαφής χρήστη του Τσάκρα.
Για παράδειγμα:
εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} από'@chakra-ui/react'λειτουργίαApp() {
συνθ [display, setDisplay] = React.useState('κανένας');λειτουργίακοινοποιώ() {
setDisplay('καλώδιο');
}λειτουργίαΚλείσε() {
setDisplay('κανένας');
}ΕΠΙΣΤΡΟΦΗ (
"εφαρμογή">'επιτυχία' display={display} παραλλαγή='στερεός'> Καλώς ήρθες!!!</AlertTitle> Χαίρομαι που είσαι εδώ</AlertDescription> 'απόλυτος' κορυφή='6 εικονοστοιχεία' δεξιά='6 εικονοστοιχεία' onClick={close}/>
</Alert>
εξαγωγήΠροκαθορισμένο App
Αυτό το μπλοκ κωδικών διαχειρίζεται την κατάσταση της εμφάνισης ειδοποιήσεων με το χρήση Κατάσταση άγκιστρο. Ορίζει την αρχική κατάσταση της εμφάνισης ειδοποιήσεων σε "καμία", η οποία αποκρύπτει την ειδοποίηση.
Όταν ο χρήστης κάνει κλικ στο Κουμπί, ονομάζει το κοινοποιώ λειτουργία. Η κλήση της συνάρτησης ειδοποίησης αλλάζει την τιμή του απεικόνιση δηλώστε από "καμία" σε "flex.", κάνοντας την ειδοποίηση ορατή.
Όταν ο χρήστης κάνει κλικ στο Κλείσιμο Κουμπί, καλεί τη συνάρτηση κλεισίματος. Αλλάζει την κατάσταση της οθόνης ξανά σε "καμία" που κρύβει την ειδοποίηση.
Τώρα μπορείτε να δημιουργήσετε προσαρμόσιμες ειδοποιήσεις
Τώρα έχετε μάθει πώς να δημιουργείτε μια προσαρμοσμένη ειδοποίηση στην εφαρμογή React χρησιμοποιώντας το Chakra UI. Με το Chakra UI, η δημιουργία προσαρμοσμένων ειδοποιήσεων στο React είναι εύκολη και διαισθητική, επιτρέποντάς μας να παρέχουμε σαφείς και συνοπτικές πληροφορίες στους χρήστες μας. Το Chakra UI παρέχει πολλά άλλα προσαρμόσιμα και προσβάσιμα στοιχεία διεπαφής χρήστη για να σας βοηθήσει να δημιουργήσετε εξαιρετικές εφαρμογές React.