本頁說明如何建構資訊卡的元件和結構。資訊卡是使用者介面,Google Chat 應用程式可用於向 Chat 使用者呈現資訊及收集資訊。Chat 應用程式可以在下列介面中建立及顯示資訊卡:
本頁面將說明資訊卡的下列元件:
- 標題:通常包含資訊卡或資訊卡部分的標題。
- 區段:構成資訊卡主體,包括小工具和其他互動式元素。在資訊卡區段中,您可以為資訊卡新增更多結構,包括欄和格線。
- 固定頁尾:顯示在對話方塊底部,用於顯示持續顯示的 UI 元素,例如按鈕。
必要條件
已設定為接收及回應互動事件的 Google Chat 應用程式。如要建立互動式 Chat 應用程式,請根據要使用的應用程式架構,完成下列其中一個快速入門導覽:
- 使用 Google Cloud Functions 的 HTTP 服務
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
使用資訊卡建構工具設計及預覽 Chat 應用程式的訊息和使用者介面:
開啟「資訊卡建立工具」新增標頭
CardHeader
小工具代表資訊卡的標頭。標題可以包含資訊卡的標題、副標題和個人資料相片。
以下是 CardHeader
的範例:
新增一或多個卡片區塊
CardSection
小工具是資訊卡中的頂層容器,您可以使用卡片區隔,將小工具分組到卡片中。每個資訊卡區段都可以包含標題和一或多個小工具。
以下範例的 CardSection
包含兩個 textParagraph
小工具:
在小工具之間新增水平分隔線
divider
小工具會顯示一條橫線,位於直向堆疊的小工具之間,並跨越卡片寬度。這條線是視覺分隔線,可協助使用者區分不同的小工具,方便掃描及瞭解資訊卡內容。
以下資訊卡包含 divider
小工具,以及其他類型的小工具:
新增欄
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
欄位,小工具會在資料欄中靠左對齊。
以下範例會將資料欄中的文字靠左水平對齊:
以下範例會將資料欄中的文字水平對齊至中央:
以下範例會將資料欄中的文字靠右水平對齊:
定義資料欄的垂直對齊方式
您可以定義 verticalAlignment
欄位,將小工具垂直對齊欄的頂端、底部或中央。如果 verticalAlignment
欄位未定義,資料欄中的小工具會對齊頂端。
以下範例會將資料欄中的文字垂直對齊頂端:
以下範例會將資料欄中的文字垂直置中對齊:
以下範例會將資料欄中的文字垂直對齊底部:
新增格線來顯示項目集合
grid
小工具會顯示包含一系列項目的格線。格線支援任意數量的欄和項目。列數取決於項目數除以欄數。
如果格線有 10 個項目和 2 欄,就會有 5 列。如果格線有 11 個項目和 2 個資料欄,則會有 6 個資料列。
這個小工具支援建議功能,可協助使用者輸入一致的資料,以及變更時的動作,也就是在文字輸入欄位發生變更時 (例如使用者新增或刪除文字) 執行的 Actions
。
以下範例是含有單一項目的 2 欄格線:
如要定義文字在格線中與圖片的顯示位置,可以指定 gridItemLayout
欄位。這個欄位可讓您定義文字在格狀檢視畫面中顯示於項目上方或下方。如果 gridItemLayout
未定義,文字預設會顯示在格線中的項目下方。
以下範例是三欄格線,每個格線中都有文字和圖片。第一個格線定義圖片上方顯示的文字,第二個格線定義圖片下方顯示的文字,第三個格線則不會定義文字位置。
為格線或欄加上框線
如要為 column
或 grid
小工具中顯示的項目新增邊框,請定義 borderType
欄位和 borderStyle
欄位。如未定義 borderStyle
欄位,系統預設不會顯示邊框。您可以定義 borderType
,套用至小工具中的所有項目,也可以將樣式套用至小工具中的每個項目。
以下範例是 2 欄格線,每個格線中都有一張圖片,且已定義邊框類型、樣式和顏色,並套用至格線中的所有項目。
以下範例是 3 欄格線,每個格線都有一張圖片,且個別定義了邊框樣式和類型。第一張圖片的邊框定義為 STROKE
。第二張圖片的邊框定義為
NO_BORDER
。第三張圖片未定義邊框。
新增輪轉介面
Carousel
小工具會顯示 CarouselCard
物件的集合,這些物件可在畫面上捲動。你可以在每個CarouselCard
中新增多個小工具。
新增固定頁尾
CardFixedFooter
小工具代表 Chat 應用程式傳送的對話方塊訊息頁尾。頁尾可以包含主要按鈕和次要按鈕。
CardFixedFooter
小工具僅適用於對話方塊。
以下是含有兩個按鈕的 CardFixedFooter
小工具範例:
疑難排解
如果 Google Chat 應用程式或資訊卡傳回錯誤,Chat 介面會顯示「發生錯誤」訊息。或「無法處理您的要求」。有時 Chat UI 不會顯示任何錯誤訊息,但 Chat 應用程式或資訊卡會產生非預期結果,例如資訊卡訊息可能不會顯示。
即使 Chat 使用者介面未顯示錯誤訊息,只要開啟 Chat 應用程式的錯誤記錄功能,系統就會提供說明性錯誤訊息和記錄資料,協助您修正錯誤。如需查看、偵錯及修正錯誤的相關協助,請參閱「排解及修正 Google Chat 錯誤」。