ב- Tailwind CSS, אלמנטים מוחלפים הם האלמנטים שהתוכן שלהם מוחלף במשאב חיצוני, כגון תמונות וסרטונים. לפעמים, משתמשים עומדים בפני אתגר למקם אלמנט מוחלף בתוך המכולה. הסיבה לכך היא שאלמנטים אלה יכולים לעלות על המיכל אם גודלם גדול מהשטח הפנוי. Tailwind CSS מספקת מחלקות עזר כדי לשלוט כיצד התוכן של רכיב מוחלף ממוקם ומיושר בתוך המכולה.
מאמר זה ימחיש את השיטה למיקום אלמנטים שהוחלפו בתוך קונטיינר ב-Tailwind CSS.
כיצד למקם אלמנטים מוחלפים בתוך מיכל ברוח הגבית?
כדי למקם אלמנטים שהוחלפו בתוך מיכל ב-Tailwind, צור תוכנית HTML והשתמש ב-' אובייקט-<מיקום/צד> ” כלי עזר עם האלמנטים הרצויים. נדרש להגדיר את הצד הספציפי, כלומר שמאל, ימין או מרכז בכלי השירות 'אובייקט-<מיקום/צד>' כדי למקם את האלמנטים שהוחלפו.
תחביר
< אֵלֵמֶנט מעמד = 'אובייקט-<עמדה/צד> ...' > ... אֵלֵמֶנט >
דוגמא
בדוגמה זו, ניצור מיכל ונשתמש בכל ' אובייקט-<מיקום/צד> ' כלי עזר עם ' ' (תמונה) אלמנטים כדי לציין את מיקומם המוחלף בתוך המיכל:
< גוּף >
< div מעמד = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< img מעמד = 'object-none object-left-top w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img מעמד = 'object-none object-left w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img מעמד = 'object-none object-left-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img מעמד = 'object-none object-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img מעמד = 'אובייקט-ללא מרכז אובייקט w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img מעמד = 'object-none object-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img מעמד = 'object-none object-right-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img מעמד = 'object-none object-right w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img מעמד = 'object-none object-right-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
גוּף >
כאן, באלמנט האב
- ' bg-sky-300 מחלקה מגדירה את צבע הרקע של המיכל לשמיים.
- ' רֶשֶׁת מחלקה מאפשרת פריסת רשת.
- ' רשת-שורות-3 מחלקה מגדירה את מספר השורות ברשת ל-3.
- ' grid-flow-col מחלקה מגדירה את זרימת פריטי הרשת בעמודות.
- ' m-5 ” מחלקה מוסיפה 5 יחידות שוליים מסביב למיכל.
- ' space-y-4 ” class מוסיפה מרווח אנכי של 4 יחידות בין רכיבי ה-
הילד בתוך המיכל.
- ' p-4 ” הכיתה מוסיפה 4 יחידות ריפוד לתוכן בתוך המיכל.
- ' להצדיק-בין ” class מיישרת את רכיבי הצאצא בתוך המיכל ומפיצה אותם באופן שווה.
באלמנטים
:
- ' אובייקט-אין ” class אינו מחיל שום מיקום על האלמנט ומציג את האלמנט במיקום ברירת המחדל שלו במיכל.
- ' אובייקט-שמאל למעלה מחלקה ממקמת את האלמנט
בפינה השמאלית העליונה של המיכל שלו.
- ' חפץ-שמאל ” class מיישר את האלמנט לקצה השמאלי של המיכל ושומר אותו במרכז אנכי.
- ' חפץ-שמאל-תחתון ' class ממקמת את האלמנט
בפינה השמאלית התחתונה של המיכל שלו.
- ' אובייקט העליון ” class ממקם את האלמנט בקצה העליון של המיכל שלו ומציב אותו במרכז אופקי.
- ' מרכז אובייקט ” class ממקמת את האלמנט במרכז המיכל ושומרת אותו מרוכז אופקית ואנכית.
- ' אובייקט-תחתית ” class ממקם את האלמנט בקצה התחתון של המיכל שלו ושומר אותו במרכז אופקי.
- ' חפץ-ימני-למעלה מחלקה ממקמת את האלמנט
בפינה השמאלית העליונה של המיכל.
- ' חפץ-זכות ” class ממקם את האלמנט בקצה הימני של המיכל שלו ושומר אותו במרכז אנכי.
- ' חפץ-ימינה-למטה מחלקה ממקמת את האלמנט בפינה השמאלית התחתונה של המיכל שלו.
תְפוּקָה
בדף האינטרנט הנ'ל, ניתן לראות שכל התוכן של הרכיב המוחלף הוצב בהצלחה.
סיכום
כדי למקם אלמנטים שהוחלפו בתוך מיכל ב-Tailwind, ה-' אובייקט-<מיקום/צד> 'כלי עזר משמשים עם האלמנטים הרצויים, כגון תמונות. משתמשים צריכים להגדיר את המיקום או הצד הספציפיים, כלומר שמאל, ימין או מרכז בכלי השירות 'אובייקט-<מיקום/צד>' כדי למקם את האלמנטים שהוחלפו. מאמר זה הדגים את השיטה למקם אלמנטים שהוחלפו בתוך קונטיינר ב-Tailwind CSS.