Class Columns

列

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

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

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

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

Google Chat アプリと Google Workspace アドオンでご利用いただけます。 

// 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);

Methods

メソッド戻り値の型概要
addColumn(column)ColumnsColumn を Columns ウィジェットに追加します。
setWrapStyle(wrapStyle)Columns列の折り返しスタイルを設定し、画面の幅に基づいて列をどのようにサイズ変更するかを制御します。

詳細なドキュメント

addColumn(column)

Column を Columns ウィジェットに追加します。列は追加された順に表示されます。列は 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 - チェーン用のこのオブジェクト。