Class Columns

Columnas

El widget Columns muestra hasta 2 columnas en una tarjeta o un diálogo. Puedes agregar widgets a cada Column; los widgets aparecen en el orden en que se especifican. Para ver un ejemplo en las apps de Google Chat, consulta Columnas.

La altura de cada columna está determinada por la columna más alta. Por ejemplo, si la primera columna es más alta que la segunda, ambas columnas tienen la altura de la primera. Dado que cada columna puede contener una cantidad diferente de widgets, no puedes definir filas ni alinear widgets entre las columnas.

Las columnas se muestran una al lado de la otra. Puedes personalizar el ancho de cada columna con el campo HorizontalSizeStyle. Si el ancho de la pantalla del usuario es demasiado estrecho, la segunda columna se ajusta debajo de la primera:

• En la Web, la segunda columna se ajusta si el ancho de la pantalla es menor o igual a 480 píxeles.
• En dispositivos iOS, la segunda columna se ajusta si el ancho de la pantalla es menor o igual a 300 pt.
• En dispositivos Android, la segunda columna se ajusta si el ancho de la pantalla es menor o igual a 320 dp.

Disponible para apps de Google Chat y complementos de Google Workspace. Las IU de complementos que admiten columnas incluyen lo siguiente:

• El diálogo que se muestra cuando los usuarios abren el complemento desde un borrador de correo electrónico
• El diálogo que se muestra cuando los usuarios abren el complemento desde el menú Agregar adjunto en un evento del Calendario de 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);

Métodos

Método	Tipo de datos que se devuelve	Descripción breve
addColumn(column)	Columns	Agrega una Column al widget Columns.
addEventAction(eventAction)	Widget	Agrega la acción de evento que se puede realizar en el widget.
setId(id)	Widget	Establece el ID único asignado que se usa para identificar el widget que se mutará.
setVisibility(visibility)	Widget	Establece la visibilidad del widget.
setWrapStyle(wrapStyle)	Columns	Establece el estilo de ajuste de las columnas y controla cómo se cambia el tamaño de la columna según el ancho de la pantalla.

Documentación detallada

addColumn(column)

Agrega una Column al widget Columns. Las columnas se muestran en el orden en que se agregan. Puedes agregar hasta dos columnas.

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

Parámetros

Nombre	Tipo	Descripción
column	Column	Una columna secundaria para agregar al widget Columns.

Volver

Columns : Este objeto, para el encadenamiento.

---

addEventAction(eventAction)

Agrega la acción de evento que se puede realizar en el widget.

Parámetros

Nombre	Tipo	Descripción
eventAction	EventAction	El EventAction que se agregará.

Volver

Widget : El objeto, para el encadenamiento.

---

setId(id)

Establece el ID único asignado que se usa para identificar el widget que se mutará. La mutación de widgets solo se admite en complementos.

Parámetros

Nombre	Tipo	Descripción
id	String	El ID del widget, con un límite de 64 caracteres y en formato `[a-zA-Z0-9-]+`.

Volver

Widget : Este objeto, para el encadenamiento.

---

setVisibility(visibility)

Establece la visibilidad del widget. El valor predeterminado es `VISIBLE`.

Parámetros

Nombre	Tipo	Descripción
visibility	Visibility	La Visibility del widget.

Volver

Widget : El objeto, para el encadenamiento.

---

setWrapStyle(wrapStyle)

Establece el estilo de ajuste de las columnas y controla cómo se cambia el tamaño de la columna según el ancho de la pantalla.

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

Parámetros

Nombre	Tipo	Descripción
wrapStyle	WrapStyle	El estilo de ajuste que se establecerá para las columnas.

Volver

Columns : Este objeto, para el encadenamiento.