Studio Editor: מיקום אלמנטים
זמן קריאה: 6 דקות
בעולם המכשירים שמשתנה ומתחדש כל הזמן, חשוב לשלוט במיקום של האלמנטים כדי שהם ייראו בדיוק כמו שאתם רוצים במסכים שונים. ב-Studio Editor, האלמנטים מוצמדים אוטומטית כדי לוודא שזה יקרה.
זה נותן לכם חופש להזיז אלמנטים ממקום למקום, בלי שתצטרכו לדאוג לגבי המיקום שלהם בין נקודות הברייקפוינט. עם זאת, אתם תמיד יכולים להגדיר את המיקום, הקיבוע והשוליים בעצמכם דרך חלונית ה-Inspector (עריכה).
כאן תוכלו לקרוא עוד על:
מיקום אלמנטים על הקנבס
עם גרירה ושחרור, אתם יכולים להגדיר את מיקום האלמנט ישירות על הקנבס, באופן נפרד עבור כל נקודת ברייקפוינט. כך תוכלו להבטיח שהאלמנט שומר על המיקום שלו בכל מסך.
כל עוד האלמנט נשאר תחת אותו הורה (למשל מקטע, תא), אתם יכולים להזיז אותו ממקום למקום והוא לא ישפיע על נקודות ברייקפוינט אחרות. אם תעבירו אלמנט להורה אחר (reparent), כל נקודות הברייקפוינט יושפעו.
נקודות ה-X וה-Y בחלוני העריכה
אתם יכולים לבדוק את מיקומי ה-X וה-Y של האלמנט כדי לראות את המיקום המדויק שלו על גודל הקנבס הנוכחי.
- X: המישור האופקי, מהקצה השמאלי לקצה הימני של אלמנט ההורה (לדוגמה, מקטע, קונטיינר, ערימה).
- Y: המישור האנכי, מהחלק העליון לתחתית של אלמנט ההורה.
בדוגמה שלמטה, אתם יכולים לראות את ערך ה-px* הופך לשלילי בזמן שאנחנו מזיזים את אלמנט הטקסט מחוץ לאלמנט ההורה שלו - התא.
מה זה px*?
px* היא יחידת מידה ב-Studio Editor, שמציגה את ה"פיקסלים על הקנבס". ערך ה-px* שאתם רואים שווה ערך לפיקסלים, בהתאם לגודל הקנבס הנוכחי. עברו לנקודת ברייקפוינט אחרת כדי לראות איך ערך ה-px* משתנה אוטומטית.
קיבוע אוטומטי
כשאתם מוסיפים אלמנט חדש, הוא מקובע אוטומטית לשני דברים:
- החלק העליון של אלמנט ההורה (לדוגמה מקטע, קונטיינר, ערימה).
- הקצה הימני או השמאלי של אלמנט ההורה - הקרוב מביניהם.
קיבוע אוטומטי מבטיח שהאלמנט יישאר במקומו בכל המסכים והמכשירים. אתם יכולים להזיז אלמנטים בחופשיות, ונקודות הקיבוע מותאמות עבורכם – מבלי שתצטרכו "לקבע מחדש".
מיקום הקיבוע מסומן על ידי הקווים המקווקווים באלמנט, ונקודות הקיבוע בחלונית ה-Inspector (עריכה) (תחת Position). בדוגמה שלמטה, אלמנט הטקסט מקובע אוטומטית לצד העליון ולצד הימני של התא.
טיפ:
כברירת מחדל, תיבת הסימון Element auto docks (האלמנט מקובע אוטומטית) מסומנת. אתם תמיד יכולים לבטל את סימון התיבה ולכוונן את הקיבוע ידנית.
כוונון ידני של קיבוע האלמנט
אתם יכולים לעקוף את הקיבוע האוטומטי ולהגדיר אותו ידנית מחלונית העריכה. זה שימושי אם, למשל, אם אתם רוצים לקבע אלמנט לחלק התחתון במקום לחלק העליון.
ניתן לקבע אלמנטים לכל צד שרוצים: לחלק העליון, התחתון, השמאלי, הימני או אפילו למרכז של מקטע, קונטיינר או התא שבו הם נמצאים.
כדי לקבע אלמנט ידנית:
- בחרו את האלמנט הרלוונטי.
- הקליקו על החץ לפתיחת כלי העריכה
בפינה הימנית העליונה של ה-Editor. - גללו למטה אל Position (מיקום).
- הקליקו על נקודות הקיבוע הרלוונטיות (למעלה, למטה, מימין או משמאל). לחלופין, הקליקו על האייקון Align to Center
(יישור למרכז) כדי שהאלמנט תמיד יהיה במרכז.
שימו לב:
זה יבטל אוטומטית את הסימון בתיבת הסימון Element auto docks (האלמנט מקובע אוטומטית).
שימוש בשוליים כשמקבעים אלמנטים
כשאלמנט מקובע, השוליים עוזרים לשמור על מרחק קבוע בין האלמנט לבין קווי הגבול של אלמנט ההורה. אתם יכולים להוסיף שוליים גם לצדדים שאין בהם קיבוע. השוליים משמשים כחיץ ומונעים חפיפה עם אלמנטים אחרים.
בדוגמה שלמטה, אלמנט הטקסט מקובע לצדדים העליון והימני של התא. כשאתם עוברים עם העכבר מעל השוליים בחלונית העריכה, הם מודגשים על הקנבס:
כדי ליצור או לערוך שוליים:
- בחרו את האלמנט הרלוונטי.
- הקליקו על החץ לפתיחת כלי העריכה בפינה הימנית העליונה של ה-Editor.
- גללו למטה אל Position (מיקום).
- הקליקו על שוליים (למשל, top, left) תחת Docking, margins and padding (קיבוע, שוליים ומרווח).
- הכניסו ערך עבור השוליים.
טיפ: הקליקו על המידה (לדוגמה, px, %) כדי לשנות אותה. מומלץ להשתמש באחוזים (%) כדי למקם את האלמנטים בצורה עקבית בכל גודל מסך. - (לא חובה) הקליקו על האייקון לעריכת כל הצדדים
כדי להגדיר את אותם השוליים בכל הצדדים.
יחידות השוליים:
אפשר להגדיר את השוליים בפיקסלים (px), באחוזים (%), בגובה מסך (vh), וברוחב מסך (vw). לכל יחידה יש תוצאה שונה כשגודל המסך משתנה. אתם יכולים לגרור ולשנו את גודל הקנבס כדי לראות את ההבדל בהתנהגות של יחידות המידה השונות.
מנעו מהאלמנטים להסתיר זה את זה
כשאתם ממקמים אלמנטים, חשוב לוודא שהם לא חופפים בנקודות ברייקפוינט קטנות יותר. היעזרו בטיפים הבאים כדי למנוע מצב כזה.
קיבוע למעלה
בדרך כלל, כדאי לקבע את האלמנטים לחלק העליון של הקונטיינר, המקטע או התא בגריד שבו הם נמצאים. זה מבטיח שתמיד יהיה רווח מוגדר בין האלמנט לבין הקונטיינר/המקטע כשעוד תוכן מתווסף לעמוד.
הוספת תאים לארגון הפריסה
אם הפריסה שלכם מורכבת יותר, הוסיפו תאים כדי לארגן את המקטע. מקמו אלמנטים בתוך התאים שלהם וקבעו אותם לקו רשת, כדי לשמור על המיקום שלהם בכל גודל מסך.
הוספת ערימה
ריכוז קבוצה של אלמנטים בערימה אופקית או אנכית מבטיח שהם לא יהיו חופפים. ערימה היא קונטיינר גמיש שמתאים אוטומטית לגדלים שונים של מסכים - אתם צריכים להגדיר רק את השוליים בין אלמנטים.
בעזרת שוליים שליליים, אתם יכולים לגרום לאלמנטים בערימה להיות חופפים. זה מאפשר לכם למקם אלמנטים לפני אלמנטים אחרים, וליצור עיצוב מורכב יותר.
זה עזר לך?
|