Class Columns

列

Columns ウィジェットは、カードまたはダイアログに最大 2 つの列を表示します。各 Column にウィジェットを追加できます。ウィジェットは、指定された順序で表示されます。Google Chat アプリの例については、列をご覧ください。

各列の高さは、高さの大きい列によって決まります。たとえば、最初の列が 2 番目の列よりも高い場合、両方の列のサイズは最初の列のサイズになります。各列に含められるウィジェットの数は異なるため、行を定義したり、列間でウィジェットを配置したりすることはできません。

列は並べて表示されます。各列の幅は HorizontalSizeStyle フィールドを使用してカスタマイズできます。ユーザーの画面幅が狭すぎる場合、2 番目の列は 1 番目の列の下に折り返されます。

  • ウェブでは、画面幅が 480 ピクセル以下の場合、2 番目の列が折り返されます。
  • iOS デバイスでは、画面幅が 300 pt 未満の場合、2 列目が折り返されます。
  • Android デバイスでは、画面幅が 320 dp 以下の場合、2 番目の列が折り返されます。

Google Chat アプリと Google Workspace アドオンで利用できます。列をサポートするアドオン UI には、次のようなものがあります。

  • メールの下書きからアドオンを開いたときに表示されるダイアログ。
  • Google カレンダーの予定の [添付ファイルを追加] メニューからアドオンを開いたときに表示されるダイアログ。
    // 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 を追加します。列は、追加された順序で表示されます。列は最大 2 つ追加できます。

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

パラメータ

名前型説明
columnColumnColumns ウィジェットに追加する子列。

戻る

Columns - チェーン用のこのオブジェクト。

setWrapStyle(wrapStyle)

列の折り返しスタイルを設定し、画面の幅に基づいて列のサイズを変更する方法を制御します。

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

パラメータ

名前型説明
wrapStyleWrapStyle列に設定する折り返しスタイル。

戻る

Columns - チェーン用のこのオブジェクト。