本頁說明如何在資訊卡或對話方塊中設定小工具的格式和結構 撰寫新的電子郵件訊息
您可以使用 Card Builder 設計及預覽即時通訊應用程式的 JSON 資訊卡訊息:
開啟資訊卡建立工具必要條件
已啟用互動功能的 Google Chat 應用程式。如要建立 互動式 Chat 應用程式,請完成下列其中一個快速入門導覽課程 在要使用的應用程式架構中:
- 含有 Google Cloud Functions 的 HTTP 服務
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
在資料欄中顯示資訊卡和對話方塊
columns
小工具
在資訊卡或對話方塊中,最多會顯示 2 欄。您可以新增
小工具會按照。
如要加入超過 2 個資料欄,或使用資料列,請使用 grid
小工具。
每個資料欄的高度取決於較高資料欄。舉例來說 第一欄的高度大於第二欄,兩欄都有 第一個欄位的高度由於每個資料欄內可包含的 您無法定義列,也無法對齊各欄之間的小工具。
以下範例顯示包含 columns
小工具的資訊卡
2 欄文字。僅查看欄版面配置及收合程式碼
請在樣本中按一下 「收合」。
當空間受限時,如以下範例所示
第二欄則會包含在第一欄下方。
定義資料欄寬度
這兩欄會並排顯示。您可以自訂每個資料欄的寬度
方法是使用
horizontalSizeStyle
欄位。
如果使用者的螢幕寬度太窄,第二欄則會換行到第一欄以下:
- 在網頁上,第二欄會在螢幕寬度小於或等於 480 像素。
- 在 iOS 裝置上,如果螢幕寬度小於或 等於 300 點
- 在 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 應用程式或 card 會傳回錯誤, 即時通訊介面會顯示「發生錯誤」的訊息。 或「無法處理你的要求」。有時使用 Chat UI 不會顯示任何錯誤訊息,但 Chat 應用程式或 資訊卡產生非預期的結果例如資訊卡訊息 顯示。
雖然 Chat UI 中可能不會顯示錯誤訊息, 提供描述性錯誤訊息和記錄資料,協助您修正錯誤 。如需觀看說明, 偵錯及修正錯誤,請參閱 疑難排解並修正 Google Chat 錯誤。
相關主題
columns
horizontalSizeStyle
horizontalAligment
verticalAlignment
divider
grid
gridItemLayout
borderStyle
borderType