Class Columns

資料欄

Columns 小工具會在資訊卡或對話方塊中顯示最多 2 欄。您可以將小工具新增到每個 Column;小工具會依照指定順序顯示。如需 Google Chat 應用程式的範例,請參閱「」。

每個資料欄的高度取決於高度資料欄。舉例來說,如果第一欄比第二欄高,則兩個欄的高度都會是第一欄的高度。由於每個資料欄可包含不同數量的小工具,因此您無法定義資料列或在資料欄之間對齊小工具。

欄會並排顯示。您可以使用 HorizontalSizeStyle 欄位自訂每個欄的寬度。如果使用者的螢幕寬度太窄,第二欄則會換行到第一欄以下:

  • 在網頁上,第二欄會在螢幕寬度小於或等於 480 像素時換行。
  • 在 iOS 裝置上,如果螢幕寬度小於或等於 300 pt,則會納入第二欄。
  • 在 Android 裝置上,如果螢幕寬度小於或等於 320 dp,第二欄就會換行。

適用於 Google Chat 應用程式和 Google Workspace 外掛程式。支援資料欄的外掛程式 UI 包括:

  • 使用者從電子郵件草稿開啟外掛程式時顯示的對話方塊。
  • 使用者在 Google 日曆活動中透過「Add attachment」選單開啟外掛程式時,會顯示的對話方塊。
    // Build a column that is aligned in the center and fills the space:
    const column =
        CardService.newColumn()
            .setHorizontalSizeStyle(
                CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE)
            .setHorizontalAlignment(CardService.HorizontalAlignment.CENTER)
            .setVerticalAlignment(CardService.VerticalAlignment.CENTER);
    const columns = CardService.newColumns().addColumn(column).setWrapStyle(
        CardService.WrapStyle.WRAP);

方法

方法傳回類型簡短說明
addColumn(column)Columns在「資料欄」小工具中新增 Column
setWrapStyle(wrapStyle)Columns設定資料欄的納入樣式,可控制資料欄如何根據螢幕寬度調整大小。

內容詳盡的說明文件

addColumn(column)

Column 新增至「欄」小工具。系統會按照新增的順序顯示資料欄。最多可以新增兩個資料欄。

const columns = CardService.newColumns().addColumn(CardService.newColumn());

參數

名稱類型說明
columnColumn要新增至「欄」小工具的子欄。

回攻員

Columns:這個物件用於鏈結。


setWrapStyle(wrapStyle)

設定欄的包覆樣式,控制欄的大小如何根據螢幕寬度調整。

const columns = CardService.newColumns()
                    .addColumn(CardService.newColumn())
                    .setWrapStyle(CardService.WrapStyle.WRAP);

參數

名稱類型說明
wrapStyleWrapStyle要為欄設定的斷行樣式。

回攻員

Columns:這個物件用於鏈結。