מאמר זה ידגים את כלי השירות שניתן להשתמש בהם לשליטה במיקום האלמנטים הממוקמים בדף האינטרנט.
כלי עזר לרוח גבית המשמשים לשליטה במיקום האלמנטים הממוקמים?
כלי השירות Tailwind CSS שעוסק ספציפית במיקום של אלמנטים ממוקמים בציר אופקי או אנכי הוא ' למעלה | נכון | תחתון | שמאלה '. בדיוק כמו כלי עזר אחרים, הוא גם מספק מחלקות שונות שיכולות להגדיר את האלמנט הממוקם במקומות שונים, חלק מהמחלקות הללו מצוינות להלן:
- inset-{placementValue}
- start-{placementValue}
- top-{placementValue}
- end-{placementValue}
- תחתית-{placementValue}
- שמאל-{placementValue}
- right-{placementValue}
כעת, הבה נקבל דוגמה מעשית להשתמש בחלק מהשיעורים הללו להבנה טובה יותר.
דוגמה: מיקום של אלמנט ממוקם באמצעות Tailwind CSS Utilities
בדוגמה זו, כלי השירות המתואר לעיל ישמש כדי למקם את האלמנט הממוקם במקומות שונים מעל דף אינטרנט, כפי שמוצג להלן:
< גוּף מעמד = 'רשת רשת-קולות-3' >
< div מעמד = 'יחסית h-32 w-32 bg-orange-200 p-4 m-4 טקסט-מרכז להצדיק-למתוח מעוגל' >
< div מעמד = 'שמאלי מוחלט-0 top-0 h-16 w-16 bg-blue-400 מעוגל p-4' > פריט 1 < / div >
< / div >
< div מעמד = 'יחסית h-32 w-32 bg-orange-200 p-4 m-4 טקסט-מרכז להצדיק-למתוח מעוגל' >
< div מעמד = 'absolute inset-x-0 top-0 h-16 bg-blue-400 מעוגל p-4' > פריט 2 < / div >
< / div >
< div מעמד = 'יחסית h-32 w-32 bg-orange-200 p-4 m-4 טקסט-מרכז להצדיק-למתוח מעוגל' >
< div מעמד = 'inset-0 אבסולוטי bg-blue-400 מעוגל p-4' > פריט 3 < / div >
< / div >
< div מעמד = 'יחסית h-32 w-32 bg-orange-200 p-4 m-4 טקסט-מרכז להצדיק-למתוח מעוגל' >
< div מעמד = 'inset-y-0 right-0 w-16 bg-blue-400 מעוגל p-4' > פריט 4 < / div >
< / div >
< div מעמד = 'יחסית h-32 w-32 bg-orange-200 p-4 m-4 טקסט-מרכז להצדיק-למתוח מעוגל' >
< div מעמד = 'אבסולוט תחתון-0 ימין-0 h-16 w-16 bg-blue-400 מעוגל p-4' > פריט 5 < / div >
< / div >
< / גוּף >
תיאור הקוד לעיל:
- ראשית, צור חמישה הורים ' div ” אלמנטים והחל מחלקות Tailwind CSS שונות כדי להגדיר את המיקום היחסי, גובה, רוחב, רקע, ריפוד, שוליים וכן הלאה.
- לאחר מכן, צור 'מקונן' div ' אלמנט בתוך כל הורה 'div'. המיקום יתבצע עבור אלמנט 'div' מקונן זה.
- לאחר מכן, החל מחלקות CSS עם רוח עורף של ' מוּחלָט ', ' ח ', ' ב ', ' bg ',' ע ', ו' מְעוּגָל ' כדי לעצב את המקוננת ' div ' אלמנט.
- לאחר מכן, החל מ-div 1 עד חמש מקונן, הקצה מחלקות חדשות של ' שמאל-0 העליון-0 ', ' inset-x-0 ', ' inset-0 ', ' inset-y-0 right-0 ', ו' תחתון-0 ימינה-0 ' בהתאמה.
- מחלקות אלו קובעות את המיקום של רכיבי div מקוננים בפינה השמאלית העליונה, מכסים את המיקום העליון, מכסים את כל חלל האב, מכסים את הצד הימני ומכסים את המיקום השמאלי התחתונה בהתאמה.
לאחר הביצוע, התצוגה המקדימה של רכיבי ה-div נראית כך:
הפלט מראה שהאלמנטים הממוקמים ממוקמים במיקומים הרצויים.
סיכום
ה ' למעלה | נכון | תחתון | שמאלה ” כלי השירות Tailwind משמש לשליטה במיקום האלמנטים בדף האינטרנט. הוא משתמש במספר מחלקות כדי למקד לכל מיקום ולאחר מכן מזיז את האלמנט הנבחר לאותו מקום בהתאם לדרישות. כיתות אלו ממקמות בעיקר את האלמנטים הממוקמים בשמאל, ימין, תחתון ולמעלה. הם יכולים לעזור לכסות את כל האזור, לכסות כיוונים ספציפיים כמו שמאלה או למעלה, וכן הלאה. מאמר זה הסביר בהצלחה את כלי השירות שניתן להשתמש בהם לשליטה במיקום של אלמנטים ממוקמים.