Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

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

Μάθετε πώς να δημιουργείτε ένα αποκριτικό υποσέλιδο στο React.js χρησιμοποιώντας τη λειτουργική μονάδα simple-react-footer.

Η μονάδα simple-react-footer είναι μια ελαφριά και εύχρηστη βιβλιοθήκη που σας επιτρέπει να δημιουργήσετε ένα αποκριτικό υποσέλιδο στο React.js. Παρέχει ένα σύνολο από στηρίγματα που μπορείτε να χρησιμοποιήσετε για να προσαρμόσετε την εμφάνιση και τη λειτουργικότητα του υποσέλιδου σας.

Πριν ξεκινήσετε τη δημιουργία ενός υποσέλιδου χρησιμοποιώντας τη μονάδα simple-react-footer, ας ρίξουμε μια γρήγορη ματιά σε μερικά από τα βασικά χαρακτηριστικά του:

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

Τώρα που έχετε μια βασική κατανόηση της λειτουργικής μονάδας simple-react-footer, ας δούμε πώς μπορείτε να τη χρησιμοποιήσετε για να δημιουργήσετε ένα υποσέλιδο στο React.js.

Ξεκινήστε από δημιουργώντας μια απλή εφαρμογή React. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε τη μονάδα simple-react-footer για να δημιουργήσετε ένα υποσέλιδο, όπως σε αυτό το παράδειγμα:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή SimpleReactFooter από"simple-react-footer";
συνθ Υποσέλιδο = () => {
// Ορίστε τα δεδομένα για το υποσέλιδο
συνθ περιγραφή = «Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
συνθ τίτλος = "Lorem Ipsum";


συνθ στήλες = [{
 τίτλος: "Στήλη 1",
 πόροι: [{
 όνομα: "Στοιχείο 1",
 Σύνδεσμος: "/item1"
 },{
 όνομα: "Αντικείμενο 2",
 Σύνδεσμος: "/item2"
 },{
 όνομα: "Στοιχείο 3",
 Σύνδεσμος: "/item3"
 },{
 όνομα: "Αντικείμενο 4",
 Σύνδεσμος: "/item4"
 }]
 },{
 τίτλος: "Στήλη 2",
 πόροι: [{
 όνομα: "Αντικείμενο 5",
 Σύνδεσμος: "/item5"
 },{
 όνομα: "Αντικείμενο 6",
 Σύνδεσμος: "/item6"
 }]
 },{
 τίτλος: "Στήλη 3",
 πόροι: [{
 όνομα: "Στοιχείο 7",
 Σύνδεσμος: "/item7"
 },{
 όνομα: "Αντικείμενο 8",
 Σύνδεσμος: "/item8"
 }]
 }];


ΕΠΙΣΤΡΟΦΗ<SimpleReactFooter
 περιγραφή={περιγραφή}
 τίτλος={τίτλος}
 στήλες={στήλες}
 />;
}
εξαγωγήΠροκαθορισμένο Υποσέλιδο;

Αυτός ο κώδικας θα δημιουργήσει ένα υποσέλιδο που μοιάζει με αυτό:

Αυτό το παράδειγμα εισάγει το στοιχείο SimpleReactFooter και ορίζει ένα λειτουργικό στοιχείο που ονομάζεται Υποσέλιδο. Μέσα στο στοιχείο Υποσέλιδο, χρησιμοποιεί το στοιχείο SimpleReactFooter, μεταβιβάζοντάς του τρία στηρίγματα: τίτλος, περιγραφή και στήλες.

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

Προσαρμογή εξαρτημάτων με διαφορετικά στηρίγματα

Εκτός από τα στηρίγματα τίτλου και περιγραφής, η μονάδα απλής αντίδρασης με υποσέλιδο παρέχει πολλά στηρίγματα που μπορείτε να περάσετε στο στοιχείο. Μπορείτε να τα χρησιμοποιήσετε για να προσαρμόσετε την εμφάνιση και τη λειτουργικότητα του υποσέλιδου σας.

Ακολουθεί μια λίστα με όλα τα στηρίγματα που είναι διαθέσιμα στη μονάδα simple-react-footer:

  • τίτλος: Ο τίτλος του υποσέλιδου.
  • περιγραφή: Μια σύντομη περιγραφή του υποσέλιδου.
  • στήλες: Μια σειρά αντικειμένων που ορίζει το περιεχόμενο των στηλών στο υποσέλιδο. Κάθε αντικείμενο πρέπει να έχει μια ιδιότητα τίτλου που καθορίζει τον τίτλο της στήλης και μια ιδιότητα πόρων που είναι ένας πίνακας αντικειμένων, καθένα από τα οποία αντιπροσωπεύει έναν πόρο στη στήλη. Κάθε αντικείμενο πόρου πρέπει να έχει μια ιδιότητα ονόματος που καθορίζει το όνομα του πόρου και μια ιδιότητα σύνδεσης που καθορίζει τη σύνδεση με τον πόρο.
  • linkedin: Η λαβή LinkedIn της εταιρείας ή του οργανισμού.
  • Facebook: Η λαβή του Facebook της εταιρείας ή του οργανισμού.
  • κελάδημα: Η λαβή Twitter της εταιρείας ή του οργανισμού.
  • Ίνσταγκραμ: Η λαβή Instagram της εταιρείας ή του οργανισμού.
  • youtube: Η λαβή YouTube της εταιρείας ή του οργανισμού.
  • pinterest: Η λαβή του Pinterest της εταιρείας ή του οργανισμού.
  • πνευματική ιδιοκτησία: Το κείμενο πνευματικών δικαιωμάτων για το υποσέλιδο.
  • εικονίδιοΧρώμα: Το χρώμα των εικονιδίων των μέσων κοινωνικής δικτύωσης στο υποσέλιδο.
  • χρώμα του φόντου: Το χρώμα φόντου του υποσέλιδου.
  • Χρώμα γραμματοσειράς: Το χρώμα της γραμματοσειράς του υποσέλιδου.
  • πνευματικά δικαιώματαΧρώμα: Το χρώμα της γραμματοσειράς του κειμένου πνευματικών δικαιωμάτων στο υποσέλιδο.

Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε όλα τα στηρίγματα που είναι διαθέσιμα στη μονάδα simple-react-footer για να δημιουργήσετε ένα προσαρμοσμένο υποσέλιδο στο React.js:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή SimpleReactFooter από"simple-react-footer";
συνθ Υποσέλιδο = () => {
// Ορίστε τα δεδομένα για το υποσέλιδο
συνθ περιγραφή = «Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
συνθ τίτλος = "Lorem Ipsum";


συνθ στήλες = [{
 τίτλος: "Στήλη 1",
 πόροι: [{
 όνομα: "Στοιχείο 1",
 Σύνδεσμος: "/item1"
 },{
 όνομα: "Αντικείμενο 2",
 Σύνδεσμος: "/item2"
 },{
 όνομα: "Στοιχείο 3",
 Σύνδεσμος: "/item3"
 },{
 όνομα: "Αντικείμενο 4",
 Σύνδεσμος: "/item4"
 }]
 },{
 τίτλος: "Στήλη 2",
 πόροι: [{
 όνομα: "Αντικείμενο 5",
 Σύνδεσμος: "/item5"
 },{
 όνομα: "Αντικείμενο 6",
 Σύνδεσμος: "/item6"
 }]
 },{
 τίτλος: "Στήλη 3",
 πόροι: [{
 όνομα: "Στοιχείο 7",
 Σύνδεσμος: "/item7"
 },{
 όνομα: "Αντικείμενο 8",
 Σύνδεσμος: "/item8"
 }]
 }];


ΕΠΙΣΤΡΟΦΗ<SimpleReactFooter
 περιγραφή={περιγραφή}
 τίτλος={τίτλος}
 στήλες={στήλες}
 linkedin="lorem_ipsum_on_linkedin"
 facebook="lorem_ipsum_on_fb"
 twitter="lorem_ipsum_on_twitter"
 instagram="lorem_ipsum_live"
 youtube="UCFt6TSF464J8K82xeA;"
 pinterest="lorem_ipsum_collections"
 πνευματικά δικαιώματα="μαύρος"
 εικονίδιοΧρώμα="μαύρος"
 Χρώμα φόντου="ανοιχτό γκρι"
 fontColor="μαύρος"
 copyrightColor="σκούρο γκρι"
 />;
}
εξαγωγήΠροκαθορισμένο Υποσέλιδο;

Αυτό το παράδειγμα χρησιμοποιεί όλα τα στηρίγματα που είναι διαθέσιμα στη μονάδα simple-react-footer για να δημιουργήσει ένα προσαρμοσμένο υποσέλιδο. Ο κώδικας θα δημιουργήσει ένα υποσέλιδο με διαφορετικά χρώματα και διάφορα εικονίδια μέσων κοινωνικής δικτύωσης:

Τα στηρίγματα linkedin, facebook, twitter, instagram, youtube και pinterest καθορίζουν τα μέσα κοινωνικής δικτύωσης της εταιρείας ή του οργανισμού. Εάν παρέχετε αυτά τα στηρίγματα, η μονάδα εμφανίζει τα αντίστοιχα εικονίδια μέσων κοινωνικής δικτύωσης στο υποσέλιδο.

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

Τα στηρίγματα iconColor, backgroundColor, fontColor και copyrightColor προσαρμόζουν την εμφάνιση του υποσέλιδου.

Εκτός από το να κάνει τον ιστότοπό σας να φαίνεται καλός, ένα αποκριτικό υποσέλιδο μπορεί να βελτιώσει την εμπειρία χρήστη του ιστότοπού σας. Ένα αποκριτικό υποσέλιδο διασφαλίζει ότι όλοι οι χρήστες, ανεξάρτητα από τη συσκευή που χρησιμοποιούν, έχουν εύκολη πρόσβαση και χρήση του υποσέλιδου.