El widget de 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 se determina 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. Debido a 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 angosto, la segunda columna se une debajo de la primera:
- En la Web, la segunda columna se ajusta si el ancho de la pantalla es menor o igual que 480 píxeles.
- En dispositivos iOS, la segunda columna se ajusta si el ancho de la pantalla es menor o igual que 300 pt.
- En dispositivos Android, la segunda columna se ajusta si el ancho de la pantalla es menor o igual que 320 dp.
Estará disponible para las apps de Google Chat y los complementos de 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);
Métodos
| Método | Tipo de datos que se muestra | Descripción breve |
|---|---|---|
addColumn(column) | Columns | Agrega un Column al widget de columnas. |
setWrapStyle(wrapStyle) | Columns | Establece el estilo de unión de las columnas y controla cómo la columna cambia de tamaño en función del ancho de la pantalla. |
Documentación detallada
addColumn(column)
Agrega un Column al widget de columnas. Las columnas se muestran en el orden en que se agregaron. 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 de Columnas. |
Devolvedor
Columns: Este objeto se usa para encadenar.
setWrapStyle(wrapStyle)
Establece el estilo de unión de las columnas y controla cómo la columna cambia de tamaño en función del 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. |
Devolvedor
Columns: Este objeto se usa para encadenar.