設定資訊卡或對話方塊的結構

本頁說明如何設定資訊卡或對話方塊訊息中的小工具格式及架構。

使用資訊卡建構工具設計及預覽資訊卡。

開啟資訊卡建構工具

必要條件

  • 擁有可存取 Google Chat 的 Google Workspace 帳戶。
  • 已發布的 Chat 應用程式。如要建構 Chat 應用程式，請按照這個quickstart操作。

    • 在資料欄中顯示資訊卡和對話方塊

    columns 小工具會在資訊卡或對話方塊中顯示最多 2 欄。您可以在每一欄新增小工具，小工具會按照指定順序顯示。如要加入超過 2 欄，或是使用資料列，請使用 grid 小工具。

    每個欄的高度是由較高欄決定。舉例來說，如果第一欄的高度大於第二欄，則這兩欄的高度都會是第一欄。由於每一欄可能包含不同數量的小工具，因此您無法定義列，也無法對齊各欄之間的小工具。

    以下範例顯示包含 columns 小工具的資訊卡，其中顯示 2 欄的文字。如果只要查看資料欄版面配置並收合程式碼範例，請按一下 「收合」。當空間受限時 (如以下範例所示)，第二欄會包在第一欄下方。

    定義資料欄的寬度

    欄並列顯示。您可以使用 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 Fiield，小工具會與欄的左側對齊。

    下列範例會水平對齊某欄中的文字：

    以下範例會水平對齊某欄內的文字：

    下列範例會將資料欄中的文字水平對齊：

    定義資料欄的垂直對齊方式

    您可以定義 verticalAlignment 欄位，將小工具垂直對齊欄的頂端、底部或中央。如未定義 verticalAlignment 欄位，欄中的小工具會對齊頂端。

    以下範例會將欄內文字垂直對齊至頂端：

    下列範例會在中央資料欄內垂直對齊文字：

    以下範例會垂直對齊底部欄中的文字：

    在小工具之間加入水平分隔線

    divider 小工具會顯示水平線，橫跨垂直堆疊的小工具之間的資訊卡寬度。這條線是視覺分隔線，可協助使用者區分小工具和其他小工具，使資訊卡更容易掃描和理解。

    以下資訊卡包含其他類型小工具之間的 divider 小工具：

    顯示含有一系列項目的格線

    grid 小工具會顯示含有項目集合的格線。格線支援任意數量的欄和項目。資料列數是由項目除以資料欄所決定。含有 10 個項目和 2 個欄的格狀檢視畫面有 5 列。如果格狀檢視中有 11 個項目和 2 個資料欄，該網格有 6 個資料列。

    小工具支援建議，這有助於使用者輸入統一的資料和進行變更動作，當文字輸入欄位發生變更時 (例如使用者新增或刪除文字) 就會執行 Actions。

    以下範例是包含單一項目的 2 欄格線：

    定義文字在格狀檢視畫面中顯示的位置

    無論文字是否顯示在格線中項目的上方或下方，gridItemLayout 欄位可讓您在每個 gridItem 中定義。如果未定義 gridItemLayout，文字預設會顯示在格狀檢視畫面中項目下方

    以下範例是 3 欄格線，每個格線中都有文字和圖片。第一個格線定義要顯示在圖片上方的文字，第二個格線定義要在圖片下方顯示的文字，第三個格線並未定義文字的位置。

    為 UI 元素加上邊框

    對於 column 或 grid 小工具中顯示的項目，您可以定義 borderType 欄位和 borderStyle 欄位，為這些 UI 元素加上邊框。如未定義任何 borderStyle 欄位，系統預設會顯示無框線。您可以定義 borderType 並套用至小工具中的所有項目，或是將樣式套用至小工具中的每個個別項目。

    以下範例是 2 個資料欄格線，每個格線中都有圖片，且已定義框線類型、樣式和顏色，並套用至格線中的所有項目。

    以下範例是 3 欄格線，每個格線都使用一張圖片，並分別定義框線樣式和類型。第一張圖片的邊框定義為 STROKE。第二張圖片有定義為 NO_BORDER 的邊框。第三張圖片未定義框線。

    疑難排解

    如果 Google Chat 應用程式或卡片傳回錯誤，Chat 介面會顯示「發生錯誤」或「無法處理您的要求」的訊息。有時 Chat UI 不會顯示任何錯誤訊息，但即時通訊應用程式或資訊卡產生非預期的結果，例如資訊卡訊息可能不會顯示。

    雖然 Chat UI 可能不會顯示錯誤訊息，但我們提供描述性的錯誤訊息和記錄資料，協助您修正啟用 Chat 應用程式錯誤記錄功能時發生的錯誤。如要瞭解如何查看、偵錯及修正錯誤，請參閱「疑難排解及修正 Google Chat 錯誤」。