Crea tarjetas para las apps de Google Chat

En esta página, se describe cómo compilar los componentes y la estructura de una tarjeta. Las tarjetas son interfaces de usuario que las apps de Google Chat pueden usar para presentar y recopilar información de los usuarios de Chat. Las apps de Chat pueden compilar y mostrar tarjetas en las siguientes interfaces:

  • Mensajes que contienen una o más tarjetas
  • Páginas principales: Es una tarjeta que aparece en la pestaña Página principal en los mensajes directos con la app de Chat.
  • Diálogos, que son tarjetas que se abren en una ventana nueva desde los mensajes y las páginas principales.

En esta página, aprenderás sobre los siguientes componentes de una tarjeta:

  • Encabezados, que suelen contener el título de una tarjeta o sección.
  • Secciones, que forman el cuerpo principal de la tarjeta, incluidos los widgets y otros elementos interactivos. En una sección de tarjeta, puedes agregar más estructura a la tarjeta, incluidas columnas y cuadrículas.
  • Pies de página fijos, que aparecen en la parte inferior de los diálogos para mostrar elementos persistentes de la IU, como botones.

Requisitos previos

Una app de Google Chat habilitada para funciones interactivas Para crear una app de Chat interactiva, completa una de las siguientes guías de inicio rápido según la arquitectura de la app que quieras usar:

Usa el Creador de tarjetas para diseñar y obtener una vista previa de las interfaces de usuario y de mensajería de las apps de Chat:

Abre el Creador de tarjetas

Agregar un encabezado

El widget CardHeader representa el encabezado de una tarjeta. Los encabezados pueden incluir un título, un subtítulo y una imagen de avatar para tu tarjeta.

El siguiente es un ejemplo de un CardHeader:

Agrega una o más secciones de tarjetas

El widget CardSection es un contenedor de alto nivel dentro de una tarjeta. Usas las secciones de tarjeta para agrupar widgets dentro de una tarjeta. Para cada sección de la tarjeta, puedes incluir un encabezado y uno o más widgets.

El siguiente es un ejemplo de un CardSection que contiene dos widgets textParagraph:

Agrega un divisor horizontal entre los widgets

El widget divider muestra una línea horizontal que abarca el ancho de una tarjeta entre widgets apilados verticalmente. La línea es un divisor visual que ayuda a los usuarios a distinguir entre un widget y otro, lo que facilita la lectura y la comprensión de las tarjetas.

La siguiente es una tarjeta que consta de un widget divider entre otros tipos de widgets:

Agregar columnas

El widget columns muestra hasta 2 columnas en una tarjeta. Puedes agregar widgets a cada columna. Los widgets aparecen en el orden en que se especifican. Para incluir más de 2 columnas o usar filas, usa el widget grid.

La altura de cada columna se determina según 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.

En el siguiente ejemplo, se muestra una tarjeta con un widget columns que incluye 2 columnas de texto. Para ver solo el diseño de las columnas y contraer el ejemplo de código, haz clic en Contraer. Cuando el espacio es limitado, como en el siguiente ejemplo, la segunda columna se une debajo de la primera.

Define el ancho de la columna

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 une debajo de la primera:

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

En el siguiente ejemplo, se muestra una tarjeta con un widget columns que incluye 2 columnas de texto con 4 elementos en las columnas. A cada elemento de las columnas se le aplicó horizontalSizeStyle para manipular la cantidad de espacio que el texto ocupa en cada columna:

  • El primer párrafo de texto usa FILL_MINIMUM_SPACE para ocupar no más del 30% del ancho de la tarjeta.
  • El segundo párrafo de texto usa FILL_AVAILABLE_SPACE para completar el espacio disponible en el ancho de la tarjeta. En este ejemplo, ocupa el 70% del ancho de la tarjeta.
  • El tercer párrafo de texto no define horizontalSizeStyle, por lo que, de forma predeterminada, se usa para llenar el espacio disponible de la tarjeta.
  • El cuarto párrafo de texto usa FILL_MINIMUM_SPACE para ocupar no más del 30% del ancho de la tarjeta.

Define la alineación horizontal de una columna

Para alinear los widgets horizontalmente a la izquierda, a la derecha o en el centro de una columna, define el campo horizontalAligment. Si el campo horizontalAlignment no está definido, los widgets se alinean a la izquierda en una columna.

En el siguiente ejemplo, se alinea horizontalmente el texto dentro de una columna a la izquierda:

En el siguiente ejemplo, se alinea horizontalmente el texto dentro de una columna en el centro:

En el siguiente ejemplo, se alinea horizontalmente el texto dentro de una columna a la derecha:

Define la alineación vertical de una columna

Para alinear los widgets verticalmente en la parte superior, inferior o central de una columna, define el campo verticalAlignment. Si el campo verticalAlignment no está definido, los widgets de una columna se alinean en la parte superior.

En el siguiente ejemplo, se alinea verticalmente el texto dentro de una columna en la parte superior:

En el siguiente ejemplo, se alinea verticalmente el texto dentro de una columna en el centro:

En el siguiente ejemplo, se alinea verticalmente el texto dentro de una columna en la parte inferior:

Cómo agregar una cuadrícula para mostrar una colección de elementos

El widget grid muestra una cuadrícula con una colección de elementos. Una cuadrícula admite cualquier cantidad de columnas y elementos. La cantidad de filas se determina según los elementos divididos por las columnas. Una cuadrícula con 10 elementos y 2 columnas tiene 5 filas. Una cuadrícula con 11 elementos y 2 columnas tiene 6 filas.

El widget admite sugerencias, que ayudan a los usuarios a ingresar datos uniformes, y acciones de cambio, que son Actions que se ejecutan cuando se produce un cambio en el campo de entrada de texto, como cuando un usuario agrega o borra texto.

El siguiente ejemplo es una cuadrícula de 2 columnas con un solo elemento:

Para definir dónde aparece el texto con una imagen en una cuadrícula, puedes especificar el campo gridItemLayout. Este campo te permite definir si el texto aparece sobre o debajo del elemento en la cuadrícula. Si gridItemLayout no está definido, el texto aparecerá de forma predeterminada debajo del elemento en la cuadrícula.

El siguiente ejemplo es una cuadrícula de tres columnas con texto y una imagen en cada una. La primera cuadrícula define el texto que aparece sobre la imagen, la segunda cuadrícula define el texto que aparece debajo de la imagen y la tercera cuadrícula no define la posición del texto.

Cómo agregar un borde a una cuadrícula o columna

Para los elementos que aparecen en un widget column o grid, puedes agregar un borde a estos elementos de la IU si defines un campo borderType y un campo borderStyle. Si no se define un campo borderStyle, no se mostrará ningún borde de forma predeterminada. Puedes definir un borderType para aplicarlo a todos los elementos de un widget o aplicar el diseño a cada elemento individual dentro de un widget.

En el siguiente ejemplo, se muestra una cuadrícula de 2 columnas con una imagen en cada una en la que se definieron el tipo de borde, el estilo y el color para que se apliquen a todos los elementos de la cuadrícula.

En el siguiente ejemplo, se muestra una cuadrícula de 3 columnas con una imagen en cada una y el estilo y el tipo de borde definidos de forma individual. La primera imagen tiene un borde definido como STROKE. La segunda imagen tiene un borde definido como NO_BORDER. La tercera imagen no tiene un borde definido.

El widget CardFixedFooter representa el pie de página de un mensaje de diálogo que envía una app de chat. Los pies de página pueden incluir un botón principal y uno secundario.

El widget CardFixedFooter solo está disponible para diálogos.

El siguiente es un ejemplo de un widget CardFixedFooter con dos botones:

Solucionar problemas

Cuando una app de Google Chat o una tarjeta muestran un error, la interfaz de Chat muestra un mensaje que dice "Se produjo un error". o "No se puede 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 la tarjeta.

Aunque es posible que no se muestre un mensaje de error en la IU de Chat, los mensajes de error descriptivos y los datos de registro están 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 problemas y corregir errores de Google Chat.