Columnas

El widget Columns muestra hasta 2 columnas en un mensaje o diálogo de tarjeta. Puedes agregar widgets a cada columna; 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 misma 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 en paralelo. Puedes personalizar el ancho de cada columna mediante el campo HorizontalSizeStyle. Si el ancho de la pantalla del usuario es demasiado angosto, 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 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.

Para incluir más de 2 columnas o usar filas, usa el widget Grid.

Son compatibles con las apps de Chat, pero no los complementos de Google Workspace.

Ejemplo: una tarjeta con dos columnas de texto

A continuación, se muestra una tarjeta con un widget Columns que muestra 2 columnas de texto. Para ver solo el diseño de las columnas y contraer la muestra de código, haz clic en Contraer (Contraer). Cuando el espacio está restringido, como en el siguiente ejemplo, la segunda columna se ajusta debajo de la primera.

Representación de JSON y campos

Representación JSON 
{
  "columnItems": [
    {
      object (Column)
    }
  ]
}
Campos
columnItems[]

object (Column)

Un array de columnas. Puedes incluir hasta 2 columnas en una tarjeta o un diálogo.

Columna

Una columna.

Representación JSON 
{
  "horizontalSizeStyle": enum (HorizontalSizeStyle),
  "horizontalAlignment": enum (HorizontalAlignment),
  "verticalAlignment": enum (VerticalAlignment),
  "widgets": [
    {
      object (Widgets)
    }
  ]
}
Campos
horizontalSizeStyle

enum (HorizontalSizeStyle)

Especifica cómo una columna completa el ancho de la tarjeta.

horizontalAlignment

enum (HorizontalAlignment)

Especifica si los widgets se alinean a la izquierda, a la derecha o al centro de una columna.

verticalAlignment

enum (VerticalAlignment)

Especifica si los widgets se alinean en la parte superior, inferior o central de una columna.

widgets[]

object (Widgets)

Un array de widgets incluidos en una columna. Los widgets aparecen en el orden en que se especifican.

HorizontalSizeStyle

Especifica cómo una columna completa el ancho de la tarjeta. El ancho de cada columna depende del HorizontalSizeStyle y del ancho de los widgets dentro de la columna.

Enumeradores
HORIZONTAL_SIZE_STYLE_UNSPECIFIED No utilizar. No se especifica.
FILL_AVAILABLE_SPACE Valor predeterminado La columna ocupa el espacio disponible, hasta el 70% del ancho de la tarjeta. Si ambas columnas están configuradas en FILL_AVAILABLE_SPACE, cada columna ocupa el 50% del espacio.
FILL_MINIMUM_SPACE La columna ocupa la menor cantidad de espacio posible y no más del 30% del ancho de la tarjeta.

HorizontalAlignment

Especifica si los widgets se alinean a la izquierda, a la derecha o al centro de una columna.

Enumeradores
HORIZONTAL_ALIGNMENT_UNSPECIFIED No utilizar. No se especifica.
START Valor predeterminado Alinea los widgets con la posición inicial de la columna. Para los diseños de izquierda a derecha, se alinea a la izquierda. Para los diseños de derecha a izquierda, se alinea con la derecha.
CENTER Alinea los widgets en el centro de la columna.
END Alinea los widgets con la posición final de la columna. Para diseños de izquierda a derecha, alinea los widgets a la derecha. Para los diseños de derecha a izquierda, se alinean los widgets a la izquierda.

VerticalAlignment

Especifica si los widgets se alinean en la parte superior, inferior o central de una columna.

Enumeradores
VERTICAL_ALIGNMENT_UNSPECIFIED No utilizar. No se especifica.
CENTER Valor predeterminado Alinea los widgets en el centro de una columna.
TOP Alinea los widgets en la parte superior de una columna.
BOTTOM Alinea los widgets en la parte inferior de una columna.

Widgets

Los widgets compatibles que puedes incluir en una columna.

Representación JSON 
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  }
  // End of list of possible types for union field data.
}
Campos

Campo de unión data.

data solo puede ser una de las siguientes opciones:

textParagraph

object (TextParagraph)

TextParagraph.

image

object (Image)

Image.

decoratedText

object (DecoratedText)

DecoratedText.

buttonList

object (ButtonList)

ButtonList.

textInput

object (TextInput)

TextInput.

selectionInput

object (SelectionInput)

SelectionInput.

dateTimePicker

object (DateTimePicker)

DateTimePicker.

Solución de problemas

Cuando una app o tarjeta de Google Chat devuelve un error, la interfaz de Chat muestra un mensaje que dice “Se produjo un error” o “No se pudo procesar tu solicitud”. A veces, la IU de Chat no muestra ningún mensaje de error, pero la app o la tarjeta de Chat producen un resultado inesperado; por ejemplo, es posible que no aparezca un mensaje de tarjeta.

Aunque es posible que no se muestre un mensaje de error en la IU de Chat, hay mensajes de error descriptivos y datos de registro disponibles para ayudarte a corregir errores cuando se activa el registro de errores de las apps de chat. Si necesitas ayuda para ver, depurar y corregir errores, consulta Cómo solucionar y corregir errores de Google Chat.