本頁說明如何設定資訊卡或對話方塊訊息中的小工具格式及架構。
使用資訊卡建構工具設計及預覽 Chat 應用程式的 JSON 資訊卡訊息:
開啟資訊卡建構工具必要條件
在資料欄中顯示資訊卡和對話方塊
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 錯誤」。
相關主題
columns
horizontalSizeStyle
horizontalAligment
verticalAlignment
divider
grid
gridItemLayout
borderStyle
borderType