En esta página, se explica cómo dar formato y estructurar widgets en una tarjeta o un diálogo mensaje.
Usa Card Builder para diseñar mensajes de tarjetas JSON y obtener una vista previa de ellos para apps de Chat:
Abre el Creador de tarjetasRequisitos 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:
- Servicio HTTP con Google Cloud Functions
- Google Apps Script
- Dialogflow CX de Google Cloud
- Google Cloud Pub/Sub
Cómo mostrar tarjetas y diálogos en columnas
El
Widget columns
muestra hasta 2 columnas en una tarjeta o un diálogo. 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 una 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 ajustará 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 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 las tarjetas. - 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 las tarjetas.
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
de la 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:
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:
Muestra una cuadrícula con 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:
Define dónde aparecerá el texto con una imagen en una cuadrícula
El
Campo gridItemLayout
te permite definir dentro de cada gridItem
, si el texto aparece arriba 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 3 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.
Cómo agregar un borde a los elementos de la IU
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.
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.
Temas relacionados
columns
horizontalSizeStyle
horizontalAligment
verticalAlignment
divider
grid
gridItemLayout
borderStyle
borderType