En esta página, se explica cómo dar formato a los widgets y estructurarlos en una tarjeta o un mensaje de diálogo.
Diseña tarjetas y obtén una vista previa de ellas con el Creador de tarjetas.
Abre el Creador de tarjetasRequisitos previos
Muestra 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 se especifican.
Para incluir más de 2 columnas o usar filas, usa el widget grid.
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.
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 columnas y contraer la muestra de código, haz clic en Collapse.
Cuando el espacio es limitado, como en el siguiente ejemplo, la segunda columna se une debajo de la primera columna.
Cómo definir 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 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.
En el siguiente ejemplo, se muestra una tarjeta con un widget columns que muestra 2 columnas de texto con 4 elementos en las columnas. Se aplicó horizontalSizeStyle a cada elemento de las columnas para manipular el espacio que ocupa el texto en cada columna:
- El primer párrafo de texto usa
FILL_MINIMUM_SPACEpara llenar no más del 30% del ancho de las tarjetas. - El segundo párrafo de texto usa
FILL_AVAILABLE_SPACEpara llenar el espacio disponible en el ancho de la tarjeta. En este ejemplo, cubre el 70% del ancho de la tarjeta. - El tercer párrafo de texto no define
horizontalSizeStyle, por lo que la configuración predeterminada llena el espacio disponible del espacio de la tarjeta. - El cuarto párrafo de texto usa
FILL_MINIMUM_SPACEpara llenar no más del 30% del ancho de las tarjetas.
Define la alineación horizontal de una columna
Puedes alinear los widgets de manera horizontal a la izquierda, la derecha o el centro de una columna definiendo el campo horizontalAligment.
Si el campo horizontalAlignment no está definido, los widgets se alinean a la izquierda en la columna.
En el siguiente ejemplo, se alinea horizontalmente el texto dentro de una columna hacia la izquierda:
En el siguiente ejemplo, se alinea horizontalmente el texto dentro de una columna del centro:
En el siguiente ejemplo, se alinea horizontalmente el texto dentro de una columna hacia 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 con la parte superior:
En el siguiente ejemplo, se alinea verticalmente el texto dentro de una columna del centro:
En el siguiente ejemplo, se alinea verticalmente el texto dentro de una columna en la parte inferior:
Cómo agregar un divisor horizontal entre los widgets
El widget divider muestra una línea horizontal que abarca el ancho de una tarjeta entre los widgets apilados verticalmente. La línea es un divisor visual que ayuda a los usuarios a distinguir entre un widget y otro, lo que hace que las tarjetas sean más fáciles de escanear y comprender.
La siguiente es una tarjeta que consta de un widget divider entre otros tipos de widgets:
Cómo mostrar 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 columnas y elementos. La cantidad de filas se determina por 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 ante cambios, que son Actions y 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:
Define dónde aparece el texto con una imagen en una cuadrícula
El campo gridItemLayout te permite definir dentro de cada gridItem, si el texto aparece encima 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 3 columnas con texto y una imagen en cada cuadrícula. La primera cuadrícula define el texto que debe aparecer sobre la imagen, la segunda cuadrícula define el texto que aparecerá debajo de la imagen y la tercera cuadrícula no define su posición.
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 a estos elementos de la IU. Para ello, define un campo borderType y un campo borderStyle.
Si no se define ningún campo borderStyle, la configuración predeterminada no muestra ningún borde. Puedes definir un borderType para aplicar a todos los elementos 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 una de ellas en la que se definieron el tipo, el estilo y el color de borde para aplicarlos a todos los elementos de la cuadrícula.
El siguiente ejemplo es una cuadrícula de 3 columnas con una imagen en cada una y el estilo y 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 ningún borde definido.
Solución de problemas
Cuando una app de Google Chat o una tarjeta 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.
Si bien 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 que te ayudarán a corregir errores cuando se activa el registro de errores para las apps de Chat. Si necesitas ayuda para ver, depurar y corregir errores, consulta Cómo solucionar problemas de Google Chat.
Temas relacionados
columnshorizontalSizeStylehorizontalAligmentverticalAlignmentdividergridgridItemLayoutborderStyleborderType