עיצוב המבנה של כרטיס או תיבת דו-שיח

בדף הזה נסביר איך לעצב ולבנות ווידג'טים בהודעת כרטיס או בתיבת דו-שיח.

עצב כרטיסים והצג תצוגה מקדימה שלהם באמצעות הכלי ליצירת כרטיסים.

לפתיחת הכלי ליצירת כרטיסים

דרישות מוקדמות

  • חשבון Google Workspace עם גישה ל-Google Chat.
  • אפליקציה שפורסמה ב-Chat. כדי ליצור אפליקציה ל-Chat, תוכלו להיעזר בquickstart.

    • הצגת כרטיסים ותיבות דו-שיח בעמודות

    בווידג'ט columns מוצגות עד 2 עמודות בכרטיס או בתיבת דו-שיח. ניתן להוסיף ווידג'טים לכל עמודה. הווידג'טים מופיעים לפי הסדר שבו הם מופיעים. כדי לכלול יותר מ-2 עמודות או להשתמש בשורות, צריך להשתמש בווידג'ט grid.

    הגובה של כל עמודה נקבע לפי העמודה הגבוהה יותר. לדוגמה, אם העמודה הראשונה גבוהה מהעמודה השנייה, בשתי העמודות יהיה הגובה של העמודה הראשונה. מכיוון שכל עמודה יכולה להכיל מספר שונה של ווידג'טים, לא ניתן להגדיר שורות או ליישר ווידג'טים בין העמודות.

    בדוגמה הבאה מוצג כרטיס עם ווידג'ט columns שכולל 2 עמודות טקסט. כדי להציג רק את פריסת העמודות ולכווץ את דוגמת הקוד, לוחצים על צמצום. כשהרווח מוגבל, כמו בדוגמה הבאה, העמודה השנייה גולשת מתחת לעמודה הראשונה.

    הגדרת רוחב של עמודה

    העמודות מוצגות זו לצד זו. אפשר להתאים אישית את הרוחב של כל עמודה באמצעות השדה horizontalSizeStyle. אם רוחב המסך של המשתמש צר מדי, העמודה השנייה תגלוש מתחת לעמודה הראשונה:

    • באינטרנט, העמודה השנייה גולשת אם רוחב המסך קטן מ-480 פיקסלים או שווה לו.
    • במכשירי iOS, העמודה השנייה גולשת אם רוחב המסך קטן מ-300 נק' או שווה לו.
    • במכשירי Android, העמודה השנייה גולשת אם רוחב המסך קטן מ-320dp או שווה לו.

    בדוגמה הבאה מוצג כרטיס עם ווידג'ט columns, שכולל 2 עמודות טקסט עם 4 פריטים בעמודות. על כל פריט בעמודות הוחל horizontalSizeStyle כדי לקבוע כמה מקום ימלא הטקסט בכל עמודה:

    • בפסקת הטקסט הראשונה נעשה שימוש ב-FILL_MINIMUM_SPACE כדי למלא עד 30% מרוחב הכרטיס.
    • בפסקת הטקסט השנייה נעשה שימוש ב-FILL_AVAILABLE_SPACE כדי למלא את המקום הזמין ברוחב הכרטיס. בדוגמה הזו, הוא ממלא 70% מרוחב הכרטיס.
    • בפסקת הטקסט השלישית לא מוגדר הערך horizontalSizeStyle, ולכן כברירת מחדל היא תמלא את השטח הזמין בכרטיס.
    • פסקת הטקסט הרביעית משתמשת ב-FILL_MINIMUM_SPACE כדי למלא עד 30% מרוחב הכרטיס.

    הגדרת היישור האופקי של עמודה

    אפשר ליישר ווידג'טים אופקית לשמאל, לימין או למרכז של עמודה על ידי הגדרת השדה horizontalAligment. אם תפוקה horizontalAlignment לא מוגדרת, הווידג'טים מיושרים לשמאל בעמודה.

    הדוגמה הבאה יישור הטקסט בתוך עמודה לשמאל:

    הדוגמה הבאה מיישרת את הטקסט בצורה אופקית בתוך עמודה במרכז:

    הדוגמה הבאה מיישמת את הטקסט בתוך עמודה לימין באופן אופקי:

    הגדרת היישור האנכי של עמודה

    אפשר ליישר ווידג'טים אנכית לחלק העליון, לתחתית או למרכז העמודה, על ידי הגדרת השדה verticalAlignment. אם השדה verticalAlignment לא מוגדר, הווידג'טים באחת העמודות מיושרות למעלה.

    הדוגמה הבאה מיישמת בצורה אנכית את הטקסט בתוך העמודה לחלק העליון של המסך:

    הדוגמה הבאה מיישרת את הטקסט באופן אנכי בתוך עמודה במרכז:

    הדוגמה הבאה יישור הטקסט באופן אנכי בתוך עמודה למטה:

    הוספת קו מפריד אופקי בין הווידג'טים

    בווידג'ט divider מוצג קו אופקי שחוצה את רוחב הכרטיס בין ווידג'טים בערימה אנכית. הקו הוא הפרדה חזותית שעוזרת למשתמשים להבחין בין ווידג'ט אחד לאחר, כך שקל יותר לסרוק ולהבין את הכרטיסים.

    לפניכם כרטיס שמכיל ווידג'ט divider בין סוגים אחרים של ווידג'טים:

    הצגת רשת עם אוסף של פריטים

    בווידג'ט grid מוצגת רשת עם אוסף פריטים. אפשר להציג מזהי עמודות בכל מספר של עמודות ופריטים. מספר השורות נקבע על ידי חלוקה של הפריטים במספר העמודות. רשת שמכילה 10 פריטים ו-2 עמודות מכילה 5 שורות. ברשת עם 11 פריטים ו-2 עמודות יש 6 שורות.

    הווידג'ט תומך בהצעות שעוזרות למשתמשים להזין נתונים אחידים, ובפעולות שינוי שהן Actions שרצות כשמתרחש שינוי בשדה להזנת הטקסט, כמו משתמש שמוסיף או מוחק טקסט.

    הדוגמה הבאה היא רשת עם 2 עמודות שמכילה פריט אחד:

    הגדרת הרשת שבה יופיע הטקסט של התמונה

    השדה gridItemLayout מאפשר להגדיר בכל gridItem אם הטקסט יופיע מעל או מתחת לפריט ברשת. אם השדה gridItemLayout לא מוגדר, הטקסט יופיע כברירת מחדל מתחת לפריט ברשת

    הדוגמה הבאה היא רשת ב-3 עמודות עם טקסט ותמונה בכל רשת. ברשת הראשונה מוגדר טקסט שיופיע מעל לתמונה, ברשת השנייה מוגדר טקסט שיופיע מתחת לתמונה וברשת השלישית לא מגדירים את מיקום הטקסט.

    הוספת גבול לרכיבי ממשק משתמש

    לפריטים שמופיעים בווידג'ט column או grid, אפשר להוסיף גבול לרכיבי ממשק המשתמש האלה על ידי הגדרת שדה borderType ושדה borderStyle. אם לא הוגדר שדה borderStyle, ברירת המחדל תהיה ללא גבולות. אפשר להגדיר borderType שיחול על כל הפריטים בווידג'ט או להחיל את הסגנון על כל פריט בנפרד בווידג'ט.

    בדוגמה הבאה מופיעה רשת של 2 עמודות, שבכל רשת תמונה כוללת את הסוג, הסגנון והצבע של הגבולות, שחל על כל הפריטים ברשת.

    הדוגמה הבאה היא רשת ב-3 עמודות עם תמונה בכל רשת, והסגנון והסוג של הגבולות מוגדרים בנפרד. לתמונה הראשונה יש גבול שמוגדר כ-STROKE. בתמונה השנייה יש גבול שמוגדר כ-NO_BORDER. בתמונה השלישית לא הוגדר גבול.

    פתרון בעיות

    כשמוצגת הודעת שגיאה באפליקציה או בכרטיס של Google Chat, מוצגת בממשק של Chat ההודעה "משהו השתבש" או "לא ניתן לעבד את הבקשה שלך". לפעמים לא מוצגת הודעת שגיאה בממשק המשתמש של Chat, אבל קיבלתי תוצאה לא צפויה באפליקציה או בכרטיס של Chat. למשל, יכול להיות שלא תופיע הודעה על כרטיס.

    יכול להיות שהודעת השגיאה לא תוצג בממשק המשתמש של Chat, אבל יש הודעות שגיאה תיאוריות ונתוני יומן שיכולים לעזור לכם לתקן שגיאות כשמפעילים רישום שגיאות באפליקציות של Chat. לקבלת עזרה בהצגה, בניפוי באגים ובתיקון שגיאות, אפשר להיעזר במאמר פתרון בעיות ותיקון שגיאות ב-Google Chat.