Home-theater-designers
Τα αναδυόμενα παράθυρα είναι ένας πολύ καλός τρόπος για να τραβήξετε την προσοχή του χρήστη σας και να εμφανίσετε σημαντικές πληροφορίες. Μπορείτε να τα χρησιμοποιήσετε για πράγματα όπως μηνύματα επιβεβαίωσης και μηνύματα σφάλματος. Ή μπορείτε απλώς να τα χρησιμοποιήσετε για να εμφανίσετε επιπλέον πληροφορίες σχετικά με ένα στοιχείο σε μια σελίδα.
Στο React, υπάρχουν δύο τρόποι για να δημιουργήσετε αναδυόμενα παράθυρα: χρησιμοποιώντας γάντζους React ή χρησιμοποιώντας εξωτερική μονάδα.
ΚΑΤΑΣΚΕΥΗ ΒΙΝΤΕΟ ΤΗΣ ΗΜΕΡΑΣ
Πώς να δημιουργήσετε αναδυόμενα παράθυρα στο React.js
Πρώτα, δημιουργήστε μια απλή εφαρμογή react . Μετά από αυτό, μπορείτε να προσθέσετε ένα αναδυόμενο παράθυρο χρησιμοποιώντας μία από τις δύο μεθόδους. Μπορείτε να χρησιμοποιήσετε τα άγκιστρα React ή μια εξωτερική μονάδα.
1. Χρήση React Hooks
Η προσέγγιση των hooks είναι απλούστερη και απαιτεί μόνο μερικές γραμμές κώδικα.
Πρώτα, πρέπει να δημιουργήσετε μια συνάρτηση που θα ανοίξει το αναδυόμενο παράθυρο. Μπορείτε να ορίσετε αυτή τη λειτουργία στο στοιχείο που θα εμφανίσει το αναδυόμενο παράθυρο.
Στη συνέχεια, πρέπει να χρησιμοποιήσετε το άγκιστρο useState για να δημιουργήσετε μια μεταβλητή κατάστασης για το αναδυόμενο παράθυρο. Μπορείτε να χρησιμοποιήσετε αυτήν τη μεταβλητή κατάστασης για να προσδιορίσετε εάν το αναδυόμενο παράθυρο πρέπει να είναι ανοιχτό ή όχι.
Τέλος, πρέπει να προσθέσετε ένα κουμπί στο στοιχείο σας που θα ενεργοποιήσει το αναδυόμενο παράθυρο. Όταν κάνετε κλικ σε αυτό το κουμπί, ορίστε τη μεταβλητή κατάστασης σε true, κάτι που θα προκαλέσει την εμφάνιση του αναδυόμενου παραθύρου.
Ρίξτε μια ματιά στον κώδικα για αυτήν την προσέγγιση:
import React, { useState } from 'react';
function Example() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button onClick={() => setIsOpen(true)}>
Open Pop-up
</button>
{isOpen && (
<div>
<div>
This is the content of the pop-up.
</div>
<button onClick={() => setIsOpen(false)}>
Pop-up
</button>
</div>
)}
</div>
);
}
export default Example;Πρώτον, αυτός ο κώδικας εισάγει το άγκιστρο useState από τη βιβλιοθήκη core react. Στη συνέχεια, η συνάρτηση Παράδειγμα χρησιμοποιεί το άγκιστρο useState για να δημιουργήσει μια μεταβλητή κατάστασης που ονομάζεται isOpen. Αυτή η μεταβλητή κατάστασης καθορίζει εάν το αναδυόμενο παράθυρο πρέπει να είναι ανοιχτό ή όχι.
το τηλέφωνό μου δεν θα συνδεθεί με τον υπολογιστή μου
Στη συνέχεια, προσθέστε ένα κουμπί στο στοιχείο που θα ενεργοποιήσει το αναδυόμενο παράθυρο. Όταν κάνετε κλικ σε αυτό το κουμπί, η μεταβλητή κατάστασης θα οριστεί σε true, κάτι που θα προκαλέσει την εμφάνιση του αναδυόμενου παραθύρου.
Τέλος, προσθέστε ένα κουμπί στο στοιχείο που θα κλείσει το αναδυόμενο παράθυρο. Όταν κάνετε κλικ σε αυτό το κουμπί, η μεταβλητή κατάστασης θα οριστεί σε false, γεγονός που θα προκαλέσει την εξαφάνιση του αναδυόμενου παραθύρου.
2. Χρήση εξωτερικής μονάδας
Μπορείτε επίσης να δημιουργήσετε αναδυόμενα παράθυρα στο React χρησιμοποιώντας μια εξωτερική μονάδα. Υπάρχουν πολλές διαθέσιμες ενότητες που μπορείτε να χρησιμοποιήσετε για αυτό το σκοπό.
Ένα δημοφιλές module είναι το react-modal. Το react-modal είναι μια απλή και ελαφριά λειτουργική μονάδα που σας επιτρέπει να δημιουργείτε modal διαλόγους στο React.
Για να χρησιμοποιήσετε το react-modal, πρέπει πρώτα να το εγκαταστήσετε χρησιμοποιώντας npm:
πώς να δείτε παλιά μηνύματα στο facebook
npm install react-modalΑφού εγκαταστήσετε το react-modal, μπορείτε να το εισαγάγετε στο στοιχείο React:
import ReactModal from 'react-modal';
import React, { useState } from 'react';
function Example() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button onClick={setIsOpen}>Open Modal</button>
<ReactModal
isOpen={isOpen}
contentLabel="Example Modal"
>
This is the content of the modal.
</ReactModal>
</div>
);
}
export default Example;Σε αυτόν τον κώδικα, εξακολουθείτε να χρησιμοποιείτε τα άγκιστρα React αλλά με τη λειτουργική μονάδα react-modal. Με τη λειτουργική μονάδα react-modal, μπορείτε να προσθέσετε περισσότερη λειτουργικότητα στο αναδυόμενο παράθυρο. Όπως μπορείτε να δείτε, ο κώδικας είναι πολύ παρόμοιος με την προηγούμενη προσέγγιση. Η μόνη διαφορά είναι ότι τώρα χρησιμοποιείτε το στοιχείο ReactModal από το react-modal αντί να δημιουργείτε το δικό σας.
Πρώτα, πρέπει να εισαγάγετε τη λειτουργική μονάδα react-modal. Στη συνέχεια, χρησιμοποιείτε το στοιχείο ReactModal για να αναδιπλώσετε το περιεχόμενο του αναδυόμενου παραθύρου. Χρησιμοποιήστε το στηρίγμα isOpen για να προσδιορίσετε εάν το modal θα πρέπει να είναι ανοιχτό ή όχι.
Αφού δημιουργήσετε το αναδυόμενο παράθυρο, ίσως θελήσετε να προσθέσετε επιπλέον λειτουργίες σε αυτό. Για παράδειγμα, μπορεί να θέλετε να κλείσετε το αναδυόμενο παράθυρο όταν ο χρήστης κάνει κλικ έξω από αυτό.
Για να το κάνετε αυτό, πρέπει να χρησιμοποιήσετε την υποστήριξη onRequest του στοιχείου react-modal. Αυτό το στήριγμα παίρνει μια συνάρτηση ως τιμή του. Αυτή η λειτουργία θα εκτελείται όταν ο χρήστης κάνει κλικ εκτός του modal.
Για παράδειγμα, για να κλείσετε το αναδυόμενο παράθυρο όταν ο χρήστης κάνει κλικ έξω από αυτό, θα χρησιμοποιήσετε τον ακόλουθο κώδικα:
import React, { useState } from 'react';
import ReactModal from 'react-modal';
function Example() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button onClick={() => setIsOpen(true)}>
Open Modal
</button>
<ReactModal
isOpen={isOpen}
contentLabel="Example Modal"
onRequest={() => setIsOpen(false)}
>
This is the content of the modal.
</ReactModal>
</div>
);
}
export default Example;Η συνάρτηση που μεταβιβάζουμε στο onRequest prop απλώς ορίζει τη μεταβλητή κατάστασης isOpen σε false. Αυτό θα προκαλέσει το κλείσιμο του modal.
Μπορείτε επίσης να προσθέσετε άλλα στηρίγματα στο στοιχείο ReactModal για να το προσαρμόσετε περαιτέρω. Για μια πλήρη λίστα με τα στηρίγματα, μπορείτε να δείτε την τεκμηρίωση του react-modal.
Προσθήκη στυλ σε αναδυόμενα παράθυρα
Αφού δημιουργήσετε το αναδυόμενο παράθυρο, ίσως θέλετε να προσθέσετε κάποιο στυλ σε αυτό. Υπάρχουν πολλοί τρόποι για να διαμορφώσετε τα στοιχεία του React, αλλά θα επικεντρωθούμε στα ενσωματωμένα στυλ.
Τα ενσωματωμένα στυλ είναι στυλ που μπορείτε να προσθέσετε απευθείας σε ένα στοιχείο React. Για να προσθέσετε ενσωματωμένα στυλ, πρέπει να χρησιμοποιήσετε την ιδιότητα στυλ. Αυτή η ιδιότητα παίρνει ένα αντικείμενο ως τιμή, όπου τα κλειδιά είναι οι ιδιότητες στυλ και οι τιμές είναι οι τιμές στυλ.
Για παράδειγμα, για να προσθέσετε ένα λευκό χρώμα φόντου και πλάτος 500 εικονοστοιχείων σε ένα αναδυόμενο παράθυρο, θα χρησιμοποιήσετε τον ακόλουθο κώδικα:
πώς να ανοίξετε το task manager στα windows 10
import React from 'react';
function Example() {
return (
<div style={{ backgroundColor: 'white', width: '500px' }}>
This is the content of the pop-up.
</div>
);
}
export default Example;Σε αυτόν τον κώδικα, προσθέτετε την ιδιότητα στυλ στο στοιχείο div με τις ιδιότητες backgroundColor και width. Μπορείτε επίσης να χρησιμοποιήστε το Tailwind CSS στην εφαρμογή react για το στυλ των αναδυόμενων παραθύρων σας.
Αυξήστε το ποσοστό μετατροπής με αναδυόμενα παράθυρα
Τα αναδυόμενα παράθυρα μπορούν να βοηθήσουν στην αύξηση των ποσοστών μετατροπών εμφανίζοντας σημαντικές πληροφορίες στον χρήστη. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε ένα αναδυόμενο παράθυρο για να εμφανίσετε έναν εκπτωτικό κωδικό ή μια ειδική προσφορά. Μπορείτε επίσης να χρησιμοποιήσετε ένα αναδυόμενο παράθυρο για τη συλλογή διευθύνσεων email για το ενημερωτικό δελτίο σας. Η προσθήκη ενός αναδυόμενου παραθύρου στην εφαρμογή React είναι ένας πολύ καλός τρόπος για να αυξήσετε τα ποσοστά μετατροπών.
Μπορείτε επίσης να αναπτύξετε εύκολα την εφαρμογή React σας δωρεάν σε σελίδες GitHub.