Class Columns

Colunas

O widget Columns mostra até duas colunas em um card ou caixa de diálogo. É possível adicionar widgets a cada Column. Eles aparecem na ordem em que são especificados. Para conferir um exemplo em apps do Google Chat, consulte Colunas.

A altura de cada coluna é determinada pela coluna mais alta. Por exemplo, se a primeira coluna for mais alta que a segunda, ambas terão a altura da primeira. Como cada coluna pode conter um número diferente de widgets, não é possível definir linhas ou alinhar widgets entre as colunas.

As colunas são mostradas lado a lado. É possível personalizar a largura de cada coluna usando o campo HorizontalSizeStyle. Se a largura da tela do usuário for muito estreita, a segunda coluna será recolhida abaixo da primeira:

  • Na Web, a segunda coluna é recolhida se a largura da tela for menor ou igual a 480 pixels.
  • Em dispositivos iOS, a segunda coluna é recolhida se a largura da tela for menor ou igual a 300 pt.
  • Em dispositivos Android, a segunda coluna é recolhida se a largura da tela for menor ou igual a 320 dp.

Disponível para apps do Google Chat e complementos do Google Workspace. As interfaces de complemento que oferecem suporte a colunas incluem:

  • A caixa de diálogo exibida quando os usuários abrem o complemento em um rascunho de e-mail.
  • Caixa de diálogo exibida quando os usuários abrem o complemento no menu Adicionar anexo em um evento do Google Agenda.
    // 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);

Métodos

MétodoTipo de retornoBreve descrição
addColumn(column)ColumnsAdiciona um Column ao widget "Colunas".
setWrapStyle(wrapStyle)ColumnsDefine o estilo de união das colunas e controla como elas são redimensionadas com base na largura da tela.

Documentação detalhada

addColumn(column)

Adiciona um Column ao widget "Colunas". As colunas são mostradas na ordem em que foram adicionadas. Você pode adicionar até duas colunas.

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

Parâmetros

NomeTipoDescrição
columnColumnUma coluna filha para adicionar ao widget "Colunas".

Retornar

Columns: este objeto, para encadeamento.


setWrapStyle(wrapStyle)

Define o estilo de união das colunas e controla como elas são redimensionadas com base na largura da tela.

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

Parâmetros

NomeTipoDescrição
wrapStyleWrapStyleO estilo de união a ser definido para as colunas.

Retornar

Columns: este objeto, para encadeamento.