עיצובי אינטרנט מודרניים רבים דורשים כותרת תחתונה רספונסיבית שנראית טוב ומתפקדת כראוי בכל המכשירים. כותרת תחתונה רספונסיבית מתאימה אוטומטית את הפריסה והתוכן שלה כך שיתאימו לגודל המסך של המכשיר שבו היא נצפית.
למד כיצד ליצור כותרת תחתונה רספונסיבית ב-React.js באמצעות מודול פשוט-הגיב-תחתונה.
מודול simple-react-footer הוא ספרייה קלת משקל וקלה לשימוש המאפשרת לך ליצור כותרת תחתונה מגיבה ב-React.js. הוא מספק קבוצה של אביזרים שבהם אתה יכול להשתמש כדי להתאים אישית את המראה והפונקציונליות של הכותרת התחתונה שלך.
לפני שנצלול לתוך יצירת כותרת תחתונה באמצעות מודול פשוט-תגובה-תחתונה, הבה נסקור כמה מהתכונות העיקריות שלו:
- פריסה הניתנת להתאמה אישית: מודול פשוט-תגובה-תחתונה מאפשר לך להגדיר את מספר העמודות בכותרת התחתונה שלך, כמו גם את התוכן של כל עמודה.
- עיצוב רספונסיבי: הכותרת התחתונה מתאימה אוטומטית את הפריסה שלה כך שתתאים לגודל המסך של המכשיר שבו היא צופה.
- מראה להתאמה אישית: מודול פשוט-תגובה-תחתונה מספק מגוון אביזרים שבהם אתה יכול להשתמש כדי להתאים אישית את המראה של הכותרת התחתונה שלך, כגון צבע הרקע, צבע הגופן וצבע הסמלים.
כעת, לאחר שיש לך הבנה בסיסית של מודול ה- simple-react-footer, בוא נראה איך אתה יכול להשתמש בו כדי ליצור כותרת תחתונה ב-React.js.
התחל ב יצירת אפליקציית React פשוטה. לאחר מכן תוכל להשתמש במודול פשוט-תגובה-תחתונה כדי ליצור כותרת תחתונה, כמו בדוגמה זו:
יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא SimpleReactFooter מ'פשוט-תגובה-תחתונה';const כותרת תחתונה = () => {
// הגדר את הנתונים עבור הכותרת התחתונה
const תיאור = "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.";
const כותרת = "לורם איפסום";const עמודות = [{
כותרת: "עמודה 1",
משאבים: [{
שֵׁם: "פריט 1",
קישור: "/item1"
},{
שֵׁם: "פריט 2",
קישור: "/item2"
},{
שֵׁם: "פריט 3",
קישור: "/item3"
},{
שֵׁם: "פריט 4",
קישור: "/item4"
}]
},{
כותרת: "עמודה 2",
משאבים: [{
שֵׁם: "פריט 5",
קישור: "/item5"
},{
שֵׁם: "פריט 6",
קישור: "/item6"
}]
},{
כותרת: "עמודה 3",
משאבים: [{
שֵׁם: "פריט 7",
קישור: "/item7"
},{
שֵׁם: "פריט 8",
קישור: "/item8"
}]
}];לַחֲזוֹר<SimpleReactFooter
description={description}
title={title}
columns={columns}
/>;
}
יְצוּאבְּרִירַת מֶחדָל כותרת תחתונה;
הקוד הזה יצור כותרת תחתונה שנראית כך:
דוגמה זו מייבאת את רכיב SimpleReactFooter ומגדירה רכיב פונקציונלי בשם Footer. בתוך הרכיב Footer, הוא משתמש ברכיב SimpleReactFooter, ומעביר לו שלושה אביזרים: כותרת, תיאור ועמודות.
המודול מציג את אביזר הכותרת בחלק העליון של הכותרת התחתונה. מתחת לזה, זה מציג את אביזר הכותרת. לבסוף, משענת העמודות היא מערך של אובייקטים המגדירים את תוכן העמודות בכותרת התחתונה.
התאמה אישית של רכיבים עם אביזרים שונים
כמו גם אביזרי הכותרת והתיאור, מודול הכותרת התחתונה הפשוטה מספקת כמה אביזרים שאתה יכול להעביר לרכיב. אתה יכול להשתמש בהם כדי להתאים אישית את המראה והפונקציונליות של הכותרת התחתונה שלך.
הנה רשימה של כל האביזרים הזמינים במודול פשוט-תגובה-תחתונה:
- כותרת: הכותרת של הכותרת התחתונה.
- תיאור: תיאור קצר של הכותרת התחתונה.
- עמודות: מערך אובייקטים המגדיר את תוכן העמודות בכותרת התחתונה. לכל אובייקט צריך להיות מאפיין title המציין את כותרת העמודה ומאפיין משאבים שהוא מערך של אובייקטים, כל אחד מייצג משאב בעמודה. לכל אובייקט משאב צריך להיות מאפיין שם המציין את שם המשאב ומאפיין קישור המציין את הקישור למשאב.
- לינקדאין: הטיפול בלינקדאין של החברה או הארגון.
- פייסבוק: הטיפול בפייסבוק של החברה או הארגון.
- טוויטר: הטיפול בטוויטר של החברה או הארגון.
- אינסטגרם: הטיפול באינסטגרם של החברה או הארגון.
- יוטיוב: הטיפול ב-YouTube של החברה או הארגון.
- פינטרסט: ידית הפינטרסט של החברה או הארגון.
- זכויות יוצרים: טקסט זכויות היוצרים עבור הכותרת התחתונה.
- סמל צבע: הצבע של אייקוני המדיה החברתית בכותרת התחתונה.
- צבע רקע: צבע הרקע של הכותרת התחתונה.
- צבע גופן: צבע הגופן של הכותרת התחתונה.
- זכויות יוצרים צבע: צבע הגופן של טקסט זכויות היוצרים בכותרת התחתונה.
הנה דוגמה לאופן שבו אתה יכול להשתמש בכל האביזרים הזמינים במודול simple-react-footer כדי ליצור כותרת תחתונה מותאמת אישית ב-React.js:
יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא SimpleReactFooter מ'פשוט-תגובה-תחתונה';const כותרת תחתונה = () => {
// הגדר את הנתונים עבור הכותרת התחתונה
const תיאור = "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.";
const כותרת = "לורם איפסום";const עמודות = [{
כותרת: "עמודה 1",
משאבים: [{
שֵׁם: "פריט 1",
קישור: "/item1"
},{
שֵׁם: "פריט 2",
קישור: "/item2"
},{
שֵׁם: "פריט 3",
קישור: "/item3"
},{
שֵׁם: "פריט 4",
קישור: "/item4"
}]
},{
כותרת: "עמודה 2",
משאבים: [{
שֵׁם: "פריט 5",
קישור: "/item5"
},{
שֵׁם: "פריט 6",
קישור: "/item6"
}]
},{
כותרת: "עמודה 3",
משאבים: [{
שֵׁם: "פריט 7",
קישור: "/item7"
},{
שֵׁם: "פריט 8",
קישור: "/item8"
}]
}];לַחֲזוֹר<SimpleReactFooter
description={description}
title={title}
columns={columns}
linkedin="lorem_ipsum_on_linkedin"
פייסבוק="lorem_ipsum_on_fb"
טוויטר="lorem_ipsum_on_twitter"
אינסטגרם="lorem_ipsum_live"
youtube="UCFt6TSF464J8K82xeA?"
pinterest="lorem_ipsum_collections"
זכויות יוצרים="שָׁחוֹר"
iconColor="שָׁחוֹר"
רקע צבע="אפור בהיר"
fontColor="שָׁחוֹר"
copyrightColor="אפור כהה"
/>;
}
יְצוּאבְּרִירַת מֶחדָל כותרת תחתונה;
דוגמה זו משתמשת בכל האביזרים הזמינים במודול פשוט-תגובה-תחתונה כדי ליצור כותרת תחתונה מותאמת אישית. הקוד יצור כותרת תחתונה עם צבעים שונים ואייקונים שונים של מדיה חברתית:
אביזרי הלינקדין, הפייסבוק, הטוויטר, האינסטגרם, היוטיוב והפינטרסט מציינים את פעולות המדיה החברתיות של החברה או הארגון. אם אתה מספק את האביזרים האלה, המודול מציג את סמלי המדיה החברתית המתאימים בכותרת התחתונה.
אביזר זכויות היוצרים מציין את טקסט זכויות היוצרים עבור הכותרת התחתונה. המודול מציג את הטקסט הזה בתחתית הכותרת התחתונה.
אביזרי הסמלColor, BackgroundColor, fontColor ו-copyrightColor מתאימים אישית את המראה של הכותרת התחתונה.
בנוסף לכך שהאתר שלך ייראה טוב, כותרת תחתונה רספונסיבית יכולה לשפר את חווית המשתמש באתר שלך. כותרת תחתונה רספונסיבית מבטיחה שכל המשתמשים, ללא קשר למכשיר שבו הם משתמשים, יוכלו לגשת לכותרת התחתונה ולהשתמש בה בקלות.