ساختار یک کارت یا گفتگو را قالب بندی کنید

این صفحه نحوه قالب بندی و ساختار ویجت ها را در یک کارت یا پیام گفتگو توضیح می دهد.

از Card Builder برای طراحی و پیش نمایش پیام های کارت JSON برای برنامه های Chat استفاده کنید:

کارت ساز را باز کنید

پیش نیازها

  • یک حساب Google Workspace با دسترسی به Google Chat .
  • یک برنامه چت منتشر شده. برای ایجاد یک برنامه چت، این شروع سریع را دنبال کنید.

    • نمایش کارت ها و دیالوگ ها در ستون ها

    ویجت columns حداکثر ۲ ستون را در یک کارت یا گفتگو نمایش می‌دهد. شما می توانید ویجت ها را به هر ستون اضافه کنید. ویجت ها به ترتیبی که مشخص شده اند ظاهر می شوند. برای گنجاندن بیش از 2 ستون یا استفاده از سطرها، از ویجت grid استفاده کنید.

    ارتفاع هر ستون توسط ستون بلندتر تعیین می شود. به عنوان مثال، اگر ستون اول از ستون دوم بلندتر باشد، هر دو ستون ارتفاع ستون اول را دارند. از آنجایی که هر ستون می تواند دارای تعداد متفاوتی از ویجت ها باشد، نمی توانید ردیف ها را تعریف کنید یا ویجت ها را بین ستون ها تراز کنید.

    مثال زیر یک کارت با ویجت columns را نشان می دهد که دارای 2 ستون متن است. برای مشاهده فقط طرح بندی ستون ها و جمع کردن نمونه کد، روی Collapse کلیک کنید. هنگامی که فضا محدود است، مانند مثال زیر، ستون دوم زیر ستون اول قرار می گیرد.

    عرض یک ستون را تعریف کنید

    ستون ها در کنار هم نمایش داده می شوند. می توانید عرض هر ستون را با استفاده از فیلد horizontalSizeStyle سفارشی کنید. اگر عرض صفحه کاربر خیلی باریک باشد، ستون دوم زیر ستون اول قرار می گیرد:

    • در وب، اگر عرض صفحه کمتر یا مساوی 480 پیکسل باشد، ستون دوم بسته می شود.
    • در دستگاه‌های iOS، اگر عرض صفحه کمتر یا مساوی 300 pt باشد، ستون دوم بسته می‌شود.
    • در دستگاه‌های Android، اگر عرض صفحه کمتر یا مساوی 320 dp باشد، ستون دوم بسته می‌شود.

    مثال زیر کارتی را با ویجت 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 ستونی با متن و یک تصویر در هر شبکه است. شبکه اول متن را برای نمایش در بالای تصویر تعریف می کند، شبکه دوم متن را برای نمایش در زیر تصویر تعریف می کند، و شبکه سوم موقعیت متن را مشخص نمی کند.

    یک حاشیه به عناصر UI اضافه کنید

    برای مواردی که در یک column یا ویجت grid ظاهر می‌شوند، می‌توانید با تعریف یک فیلد borderType و یک فیلد borderStyle ، یک حاشیه به این عناصر رابط کاربری اضافه کنید. اگر فیلد borderStyle تعریف نشده باشد، به طور پیش‌فرض بدون حاشیه نشان داده می‌شود. شما می توانید یک borderType برای اعمال به همه موارد داخل یک ویجت یا اعمال یک ظاهر طراحی برای هر آیتم جداگانه در یک ویجت تعریف کنید.

    مثال زیر یک شبکه 2 ستونی با یک تصویر در هر شبکه است که در آن نوع حاشیه، سبک و رنگ برای اعمال همه موارد داخل شبکه تعریف شده است.

    مثال زیر یک شبکه 3 ستونی با یک تصویر در هر شبکه است و سبک و نوع حاشیه به صورت جداگانه تعریف شده است. تصویر اول دارای یک حاشیه است که به عنوان STROKE تعریف شده است. تصویر دوم دارای یک حاشیه است که به عنوان NO_BORDER تعریف شده است. تصویر سوم هیچ حاشیه ای تعریف نشده است.

    عیب یابی

    وقتی یک برنامه یا کارت Google Chat خطایی را برمی‌گرداند، رابط Chat پیامی را نشان می‌دهد که می‌گوید «مشکلی پیش آمده است». یا "نمی توان به درخواست شما رسیدگی کرد." گاهی اوقات Chat UI هیچ پیام خطایی را نمایش نمی دهد، اما برنامه یا کارت Chat نتیجه غیرمنتظره ای ایجاد می کند. برای مثال، ممکن است پیام کارت ظاهر نشود.

    اگرچه ممکن است پیام خطا در رابط کاربری گپ نمایش داده نشود، پیام‌های خطای توصیفی و داده‌های گزارش در دسترس هستند تا به شما کمک کنند هنگام فعال بودن ثبت خطا برای برنامه‌های گپ، خطاها را برطرف کنید. برای راهنمایی برای مشاهده، اشکال‌زدایی و رفع خطاها، به عیب‌یابی و رفع خطاهای Google Chat مراجعه کنید.