Studio Editor: שימוש בתיבות רב‑מצביות (Multi‑state)

זמן קריאה: 4 דקות
תיבות רב-מצביות מאפשרות להציג תוכן שונה למצבים שונים באותה תיבת קונטיינר, ולהציג מצב אחד בכל פעם. עליכם לבחור את מספר המצבים של התיבה, לעצב אותם ולתת להם קודי זיהוי שישמשו אתכם בקוד.
הקוד שלכם מגדיר מתי להציג כל מצב. אתם יכולים ליצור תנאים שיגדירו מתי כל מצב יופיע אוטומטית, או לאפשר לגולשים לעבור בין המצבים בעצמם. 
קובץ GIF שמציג תיבה רב-מצבית שהמשתמש עובר בה בין המצבים

שלב 1 | הוסיפו תיבה רב-מצבית

בשלב הראשון נוסיף לאתר תיבה רב-מצבית ישירות מחלונית ההוספה. יש לגרור את התיבה למיקום הרצוי בעמוד. 

כדי להוסיף תיבה רב-מצבית:

  1. הקליקו על Add Elements (הוספת אלמנטים) בצד שמאל של ה-Editor.
  2. הקליקו על Layout Tools (כלי פריסה).
  3. הקליקו על Multi-State Boxes (תיבות רב-מצביות).
  4. גררו תיבה רב-מצבית למיקום הרלוונטי בעמוד. 
החלונית Add Elements (הוספת אלמנטים) פתוחה. אלמנט התיבה הרב-מצבית מסומן.
השתמשו בתיבות רב-מצביות בתוך רפיטרים:
אחרי שמוסיפים תיבה רב-מצבית לאייטם של רפיטר, היא נוספת אוטומטית לשאר הפריטים שיש להם עיצוב זהה. אפשרות זאת שימושית לרשימות עם פריטים חוזרים כמו שאלות נפוצות או גלריות מוצרים.

שלב 2 | הוסיפו ועצבו את המצבים

אחרי שהוספתם את התיבה, יש לעצב את המצבים שיופיעו בה. אתם יכולים לערוך את המצבים האלה איך שתבחרו: להשתמש בהם עבור תגים קטנים כמו זמינות מוצרים (למשל, "חדש", "אזל מהמלאי"), או ליצור עיצוב שונה לגמרי לכל מצב. 
הקליקו למטה כדי ללמוד איך: 
אלמנט ניהול המצבים בתיבה מרובת-המצבים פתוח ב-Studio Editor, ומראה את האפשרויות.
טיפ לעיצוב:
למצבים יכולים להיות מאפייני גובה שונים שמאפשרים לחשוף מידע נוסף, למשל. עם זאת, רוחב המצבים יישאר תמיד זהה.

שלב 3 | הוסיפו קוד

כדי שהתיבה הרב-מצבית תפעל, השלב האחרון הוא להוסיף קוד שקובע מתי כל מצב יופיע. 
באמצעות פונקציות ואירועים שזמינים ב-Velo API עבור תיבות רב-מצביות, אפשר להגדיר ולהחיל כללים להצגה ולניווט בין המצבים.
חשוב:
בזמן הוספת הקוד הרלוונטי, ודאו שכתבתם את מזהי המצבים בצורה נכונה, עם אותם איות ואותיות רישיות. 
קובץ GIF שמציג את המצבים של תיבה מרובת-מצבים ואת הקודים הרלוונטיים לה משמאל.
הבא:

זה עזר לך?

|