Crea tarjetas para las apps de Google Chat

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

  • Mensajes que contienen una o más tarjetas.
  • Páginas principales que es una tarjeta que aparece en la pestaña Página principal en mensajes con la app de Chat.
  • Diálogos, que son tarjetas que se abren en una nueva ventana 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. sección.
  • Secciones, que conforman el cuerpo principal de la tarjeta, incluidos widgets y otros elementos interactivos. En una tarjeta puedes darle más estructura a la tarjeta, incluidas columnas y cuadrículas.
  • Pies de página fijos, que aparecen en la parte inferior de Diálogos para mostrar elementos persistentes de la IU, como botones.

Requisitos previos

Una app de Google Chat habilitada para funciones interactivas. Para crear un app de Chat interactiva, completa una de las siguientes guías de inicio rápido en la arquitectura de app que quieres usar:

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

Abre el Creador de tarjetas

Agregar un encabezado

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

A continuación, se muestra 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 tarjeta para agrupar widgets en 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 textParagraph widgets:

Agregar un divisor horizontal entre 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 los usuarios distinguen entre un widget y otro, lo que hace que las tarjetas sean más fáciles de escanear. y comprenderlos.

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

Agregar columnas

El Widget columns muestra hasta 2 columnas por tarjeta. Puedes agregar widgets a cada columna; los widgets aparecen en el orden en que están especificada. Para incluir más de 2 columnas o usar filas, usa el widget grid.

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 tienen la la altura de la primera columna. Debido a que cada columna puede contener un número diferente, de los widgets, no puedes definir filas o alinear widgets entre las columnas.

En el siguiente ejemplo, 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 el código muestra, haz clic en Contraer. Cuando el espacio es limitado, como en el siguiente ejemplo, el la segunda columna se une debajo de la primera.

Define el ancho de 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 angosto, la segunda columna se ajusta debajo del nombre:

  • 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 que igual a 300 pt.
  • En dispositivos Android, la segunda columna se ajusta si el ancho de la pantalla es menor que o igual a 320 dp.

En el siguiente ejemplo, se muestra una tarjeta con un widget columns que muestra 2 columnas de texto con 4 elementos en las columnas Cada elemento de las columnas tiene Se aplicó horizontalSizeStyle para manipular el espacio del texto llena cada columna:

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

Define la alineación horizontal de una columna

Puedes alinear los widgets horizontalmente a la izquierda, a la derecha o al centro de una columna definir Campo horizontalAligment. Si el campo horizontalAlignment no está definido, los widgets se alinean con el a la izquierda en una columna.

En el siguiente ejemplo, se alinea horizontalmente el texto 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 de una columna hacia la derecha:

Definir la alineación vertical de una columna

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

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

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

En el siguiente ejemplo, se alinea el texto verticalmente en una columna de 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 como columnas y elementos. La cantidad de filas se determina mediante los elementos divididos por 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. acciones ante cambios, que son Actions que se ejecutan cuando se produce un cambio en el campo de entrada de texto, como cuando un usuario agrega o borrar 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 la Campo gridItemLayout. Este campo te permite definir si el texto aparece encima o debajo el elemento de la cuadrícula. Si gridItemLayout no está definido, el texto se establece de forma predeterminada como aparecen debajo del elemento en la cuadrícula.

El siguiente ejemplo es una cuadrícula de tres columnas con texto y una imagen en cada cuadrícula. 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 no define la posición del texto.

Agregar un borde a una cuadrícula o columna

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

El siguiente ejemplo es una cuadrícula de 2 columnas con una imagen en cada cuadrícula en la que el tipo, el estilo y el color de borde se han definido para aplicar a todos los elementos dentro del cuadrícula.

El siguiente ejemplo es una cuadrícula de 3 columnas con una imagen en cada cuadrícula y los el estilo y el tipo de borde definidos individualmente. La primera tiene un borde definido como STROKE. La segunda imagen tiene un borde definido como NO_BORDER La tercera imagen no tiene ningún borde definido.

El CardFixedFooter widget representa el pie de página de un mensaje de diálogo enviado por 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 card muestra un error, el En la interfaz de Chat, aparece un mensaje que dice “Se produjo un error”. o "No se pudo procesar la solicitud". A veces, la IU de Chat no muestra ningún mensaje de error, pero la app de Chat la tarjeta produce un resultado inesperado; Por ejemplo, es posible que un mensaje de tarjeta no para que aparezca la opción.

Aunque es posible que no aparezca 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. Para obtener ayuda sobre la visualización, la depuración y la corrección de errores, consulta Soluciona problemas y corrige errores de Google Chat.