Cards v2

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Tarjeta

Las tarjetas admiten un diseño definido, elementos de IU interactivos, como botones, y rich media, como imágenes. Usa tarjetas para presentar información detallada, recopilar información de los usuarios y guiarlos para dar el siguiente paso.

En Google Chat, las tarjetas aparecen en varios lugares:

  • Como mensajes independientes
  • Debajo de un mensaje de texto, debajo del mensaje de texto
  • Como diálogo

El siguiente JSON de ejemplo crea una "tarjeta de contacto" que presenta:

  • Un encabezado con el nombre del contacto, el cargo, la foto del avatar
  • Una sección con la información de contacto, incluido el texto con formato
  • Botones en los que los usuarios pueden hacer clic para compartir el contacto o ver más o menos información

Ejemplo de tarjeta de contacto

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
          "title": "Sasha",
          "subtitle": "Software Engineer",
          "imageUrl":
          "https://developers.google.com/chat/images/quickstart-app-avatar.png",
          "imageType": "CIRCLE",
          "imageAltText": "Avatar for Sasha",
        },
        "sections": [
          {
            "header": "Contact Info",
            "collapsible": true,
            "uncollapsibleWidgetsCount": 1,
            "widgets": [
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "EMAIL",
                  },
                  "text": "sasha@example.com",
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PERSON",
                  },
                  "text": "<font color=\"#80e27e\">Online</font>",
                },
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PHONE",
                  },
                  "text": "+1 (555) 555-1234",
                }
              },
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "Share",
                      "onClick": {
                        "openLink": {
                          "url": "https://example.com/share",
                        }
                      }
                    },
                    {
                      "text": "Edit",
                      "onClick": {
                        "action": {
                          "function": "goToView",
                          "parameters": [
                            {
                              "key": "viewType",
                              "value": "EDIT",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}
Representación JSON
{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}
Campos
header

object ( CardHeader )

Es el encabezado de la tarjeta. Por lo general, un encabezado contiene una imagen principal y un título. Los encabezados siempre aparecen en la parte superior de una tarjeta.

sections[]

object ( Section )

Contiene una colección de widgets. Cada sección tiene su propio encabezado opcional. Las secciones se separan visualmente con un divisor de línea.

cardActions[]

object ( CardAction )

Las acciones de la tarjeta. Las acciones se agregan al menú de la barra de herramientas de la tarjeta.

Debido a que las tarjetas de la app de Chat no tienen barra de herramientas, cardActions[] no es compatible con las apps de Chat.

Por ejemplo, el siguiente JSON crea un menú de acciones de tarjeta con las opciones de configuración y envío de comentarios:

"cardActions": [
  {
    "actionLabel": "Settings",
    "onClick": {
      "action": {
        "functionName": "goToView",
        "parameters": [
          {
            "key": "viewType",
            "value": "SETTING"
         }
        ],
        "loadIndicator": "LoadIndicator.SPINNER"
      }
    }
  },
  {
    "actionLabel": "Send Feedback",
    "onClick": {
      "openLink": {
        "url": "https://example.com/feedback"
      }
    }
  }
]
name

string

Nombre de la tarjeta. Se usa como identificador de tarjeta en la navegación de tarjetas.

Dado que las apps de Chat no admiten la navegación con tarjetas, ignoran este campo.

displayStyle

enum ( DisplayStyle )

En los complementos de Google Workspace, configura las propiedades de visualización de peekCardHeader .

No es compatible con las apps de Chat.

peekCardHeader

object ( CardHeader )

Cuando muestra contenido contextual, el encabezado de la tarjeta de vista previa funciona como un marcador de posición para que el usuario pueda navegar entre las tarjetas de la página principal y las tarjetas contextuales.

No es compatible con las apps de Chat.

Encabezado de la tarjeta

Representa el encabezado de una tarjeta.

Representación JSON
{
  "title": string,
  "subtitle": string,
  "imageType": enum (ImageType),
  "imageUrl": string,
  "imageAltText": string
}
Campos
title

string

Obligatorio. El título del encabezado de la tarjeta. El encabezado tiene una altura fija: si se especifican un título y un subtítulo, cada uno ocupa una línea. Si solo se especifica el título, ocupará ambas líneas.

subtitle

string

Es el subtítulo del encabezado de la tarjeta. Si se especifica, aparece en su propia línea debajo de title .

imageType

enum ( ImageType )

La forma utilizada para recortar la imagen.

imageUrl

string

La URL HTTPS de la imagen en el encabezado de la tarjeta.

imageAltText

string

El texto alternativo de esta imagen que se usa para accesibilidad.

Tipo de imagen

La forma utilizada para recortar la imagen.

Enumeradores
SQUARE Valor predeterminado Aplica una máscara cuadrada a la imagen. Por ejemplo, una imagen de 4 x 3 pasa a ser de 3 x 3.
CIRCLE Aplica una máscara circular a la imagen. Por ejemplo, una imagen de 4 x 3 se convierte en un círculo con un diámetro de 3.

Sección

Una sección contiene una colección de widgets que se representan verticalmente en el orden en que se especifican.

Representación JSON
{
  "header": string,
  "widgets": [
    {
      object (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer
}
Campos
header

string

Texto que aparece en la parte superior de una sección. Admite texto con formato HTML simple.

widgets[]

object ( Widget )

Todos los widgets de la sección. Debe contener al menos 1 widget.

collapsible

boolean

Indica si esta sección se puede contraer.

Las secciones contraíbles ocultan algunos o todos los widgets, pero los usuarios pueden expandir la sección para mostrar los widgets ocultos al hacer clic en Mostrar más. Los usuarios pueden volver a ocultar los widgets si hacen clic en Mostrar menos.

Para determinar qué widgets están ocultos, especifica uncollapsibleWidgetsCount .

uncollapsibleWidgetsCount

integer

La cantidad de widgets contraíbles que permanecen visibles incluso cuando se contrae una sección.

Por ejemplo, cuando una sección contiene cinco widgets y uncollapsibleWidgetsCount está configurado como 2 , los dos primeros widgets siempre se muestran y los últimos tres se contraen de forma predeterminada. El uncollapsibleWidgetsCount se considera solo cuando collapsible es true .

Widget

Cada tarjeta consta de widgets.

Un widget es un objeto compuesto que puede representar texto, imágenes, botones y otros tipos de objetos.

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)
  },
  "divider": {
    object (Divider)
  },
  "grid": {
    object (Grid)
  }
  // End of list of possible types for union field data.
}
Campos
Campo de unión data . Un widget solo puede tener uno de los siguientes elementos. Puedes usar varios campos de widgets para mostrar más elementos. data solo puede ser una de las siguientes opciones:
textParagraph

object ( TextParagraph )

Muestra un párrafo de texto. Admite texto con formato HTML simple.

Por ejemplo, el siguiente JSON crea un texto en negrita:

"textParagraph": {
  "text": "  <b>bold text</b>"
}
image

object ( Image )

Muestra una imagen.

Por ejemplo, el siguiente JSON crea una imagen con texto alternativo:

"image": {
  "imageUrl":
  "https://developers.google.com/chat/images/quickstart-app-avatar.png"
  "altText": "Chat app avatar"
}
decoratedText

object ( DecoratedText )

Muestra un elemento de texto decorado.

Por ejemplo, el siguiente JSON crea un widget de texto decorado que muestra la dirección de correo electrónico:

"decoratedText": {
  "icon": {
    "knownIcon": "EMAIL"
  },
  "topLabel": "Email Address",
  "text": "sasha@example.com",
  "bottomLabel": "This is a new Email address!",
  "switchWidget": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "ControlType.CHECKBOX"
  }
}
buttonList

object ( ButtonList )

Una lista de botones.

Por ejemplo, el siguiente JSON crea dos botones. El primero es un botón de texto azul y el segundo, un botón de imagen que abre un vínculo:

"buttonList": {
  "buttons": [
    "button": {
      "text": "Edit",
      "color": {
        "red": 0,
        "green": 0,
        "blue": 1,
        "alpha": 1
       }
      "disabled": true
    },
    "button": {
      "icon": {
        "knownIcon": "INVITE"
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    },
  ]
}
textInput

object ( TextInput )

Muestra un cuadro de texto en el que los usuarios pueden escribir.

Actualmente, se admite en los diálogos. Pronto se admitirán los mensajes de tarjeta.

Por ejemplo, el siguiente JSON crea una entrada de texto para una dirección de correo electrónico:

"textInput": {
  "name": "mailing_address",
  "label": "Mailing Address"
}

Como otro ejemplo, el siguiente JSON crea una entrada de texto para un lenguaje de programación con sugerencias estáticas:

"textInput": {
  "name": "preferred_programing_language",
  "label": "Preferred Language",
  "initialSuggestions": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
selectionInput

object ( SelectionInput )

Muestra un control de selección que permite a los usuarios seleccionar elementos. Los controles de selección pueden ser casillas de verificación, botones de selección, interruptores o menús desplegables.

Actualmente, se admite en los diálogos. Pronto se admitirán los mensajes de tarjeta.

Por ejemplo, el siguiente JSON crea un menú desplegable que permite a los usuarios elegir un tamaño:

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "SelectionType.DROPDOWN",
  "items": [
    {
      "text": "S",
      "value": "small",
      "selected": false
    },
    {
      "text": "M",
      "value": "medium",
      "selected": true
    },
    {
      "text": "L",
      "value": "large",
      "selected": false
    },
    {
      "text": "XL",
      "value": "extra_large",
      "selected": false
    }
  ]
}
dateTimePicker

object ( DateTimePicker )

Muestra un widget de selección/entrada para la fecha, la hora o la fecha y hora.

No es compatible con las apps de Chat. Pronto estará disponible la compatibilidad con apps de Chat.

Por ejemplo, el siguiente JSON crea un selector de fecha y hora para programar una cita:

"dateTimePicker": {
  "name": "appointment_time",
  "label": "Book your appointment at:",
  "type": "DateTimePickerType.DATE_AND_TIME",
  "valueMsEpoch": "796435200000"
}
divider

object ( Divider )

Muestra una línea divisoria horizontal entre los widgets.

Por ejemplo, el siguiente JSON crea un divisor:

"divider": {
}
grid

object ( 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 límites superiores de los elementos de número divididos por la cantidad de 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.

Actualmente, se admite en los diálogos. Pronto se admitirán los mensajes de tarjeta.

Por ejemplo, el siguiente JSON crea una cuadrícula de 2 columnas con un solo elemento:

"grid": {
  "title": "A fine collection of items",
  "numColumns": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4.0
  },
  "items": [
    "image": {
      "imageUri": "https://www.example.com/image.png",
      "cropStyle": {
        "type": "SQUARE"
      },
      "borderStyle": {
        "type": "STROKE"
      }
    },
    "title": "An item",
    "textAlignment": "CENTER"
  ],
  "onClick": {
    "openLink": {
      "url":"https://www.example.com"
    }
  }
}

TextoParagraph

Es un párrafo de texto que admite formato. Consulta Formato de texto para obtener más detalles.

Representación JSON
{
  "text": string
}
Campos
text

string

El texto que se muestra en el widget.

De imagen

Una imagen que se especifica mediante una URL y puede tener una acción onClick .

Representación JSON
{
  "imageUrl": string,
  "onClick": {
    object (OnClick)
  },
  "altText": string
}
Campos
imageUrl

string

La URL https que aloja la imagen.

Por ejemplo:

https://developers.google.com/chat/images/quickstart-app-avatar.png
onClick

object ( OnClick )

Cuando un usuario hace clic en la imagen, el clic activa esta acción.

altText

string

El texto alternativo de esta imagen, que se usa para fines de accesibilidad.

Al hacer clic

Representa cómo responder cuando los usuarios hacen clic en un elemento interactivo de una tarjeta, como un botón.

Representación JSON
{

  // Union field data can be only one of the following:
  "action": {
    object (Action)
  },
  "openLink": {
    object (OpenLink)
  },
  "openDynamicLinkAction": {
    object (Action)
  },
  "card": {
    object (Card)
  }
  // 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:

action

object ( Action )

Si se especifica, onClick activa una acción.

card

object ( Card )

Se envía una tarjeta nueva a la pila después de hacer clic si se especifica.

Compatible con complementos de Google Workspace, pero no con apps de Chat.

Acción

Es una acción que describe el comportamiento cuando se envía el formulario. Por ejemplo, se puede invocar una Apps Script para manejar el formulario.

Representación JSON
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction)
}
Campos
function

string

Una función personalizada para invocar cuando se hace clic en el elemento contenedor o se activa en el otro lado

Para ver ejemplos de uso, consulta Cómo crear tarjetas interactivas.

parameters[]

object ( ActionParameter )

Lista de parámetros de acción.

loadIndicator

enum ( LoadIndicator )

Especifica el indicador de carga que muestra la acción mientras se realiza la llamada a la acción.

persistValues

boolean

Indica si los valores del formulario persisten después de la acción. El valor predeterminado es false .

Si es true , los valores del formulario permanecen después de que se activa la acción. Cuando se usa LoadIndicator.NONE para acciones, se recomienda persistValues = true , ya que garantiza que la respuesta no reemplace los cambios realizados por el usuario después del formulario o las acciones de cambio.

Si es false , los valores del formulario se borran cuando se activa la acción. Cuando se configura persistValues como false , se recomienda que la tarjeta use LoadIndicator.SPINNER para todas las acciones, ya que esto bloquea la IU a fin de garantizar que el usuario no realice cambios mientras se procesa la acción.

No es compatible con las apps de Chat.

interaction

enum ( Interaction )

Opcional. Obligatorio cuando se abre un diálogo.

Qué hacer en respuesta a una interacción con un usuario, como cuando un usuario hace clic en un botón de un mensaje de tarjeta.

Si no se especifica, la app responde mediante la ejecución de un action , como abrir un vínculo o ejecutar una función, de forma normal.

Si especificas un interaction , la app puede responder de formas interactivas especiales. Por ejemplo, si configuras interaction en OPEN_DIALOG , la app puede abrir un diálogo.

Cuando se especifica, no se muestra un indicador de carga.

Compatible con apps de Chat, pero no con complementos de Google Workspace. Si se especifica para un complemento, se quita toda la tarjeta y no se muestra nada en el cliente.

Parámetro de acción

Lista de parámetros de string para proporcionar cuando se invoca el método de acción. Por ejemplo, considere tres opciones para posponer: posponer ahora, posponer durante un día la próxima semana. Podría usar el método de acción = posponer{/1}, pasando el tipo y la hora de posponer en la lista de parámetros de string.

Para obtener más información, consulta CommonEventObject.

Representación JSON
{
  "key": string,
  "value": string
}
Campos
key

string

El nombre del parámetro para la secuencia de comandos de acción.

value

string

El valor del parámetro.

Indicador de carga

Especifica el indicador de carga que muestra la acción mientras se realiza la llamada a la acción.

Enumeradores
SPINNER Muestra un ícono giratorio para indicar que el contenido se está cargando.
NONE No se muestra nada.

Interacción

Opcional. Obligatorio cuando se abre un diálogo.

Qué hacer en respuesta a una interacción con un usuario, como cuando un usuario hace clic en un botón de un mensaje de tarjeta.

Si no se especifica, la app responde mediante la ejecución de un action , como abrir un vínculo o ejecutar una función, de forma normal.

Si especificas un interaction , la app puede responder de formas interactivas especiales. Por ejemplo, si configuras interaction en OPEN_DIALOG , la app puede abrir un diálogo.

Cuando se especifica, no se muestra un indicador de carga.

Compatible con apps de Chat, pero no con complementos de Google Workspace. Si se especifica para un complemento, se quita toda la tarjeta y no se muestra nada en el cliente.

Enumeradores
INTERACTION_UNSPECIFIED Valor predeterminado El action se ejecuta con normalidad.
OPEN_DIALOG

Abre un diálogo, una interfaz basada en ventanas y basada en tarjetas que las apps de chat usan para interactuar con los usuarios.

Solo son compatibles con las apps de Chat en respuesta a los clics en botones de mensajes de tarjetas.

No es compatible con los complementos de Google Workspace. Si se especifica para un complemento, se quita toda la tarjeta y no se muestra nada en el cliente.

OpenA

Cuando un OnClick abre un vínculo, el cliente puede abrirlo como una ventana de tamaño completo (si es el marco que usa el cliente) o como una superposición (como una ventana emergente). La implementación depende de las capacidades de la plataforma del cliente, y el valor seleccionado puede ignorarse si el cliente no lo admite. FULL_SIZE es compatible con todos los clientes.

Compatible con complementos de Google Workspace, pero no con apps de Chat.

Enumeradores
FULL_SIZE El vínculo se abre como una ventana de tamaño completo (si es el marco que usa el cliente).
OVERLAY El vínculo se abre como una superposición, por ejemplo, una ventana emergente.

Al cierre

Qué hace el cliente cuando se cierra un vínculo que abrió una acción OnClick .

La implementación depende de las capacidades de la plataforma del cliente. Por ejemplo, un navegador web podría abrir un vínculo en una ventana emergente con un controlador OnClose .

Si se configuran los controladores OnOpen y OnClose , y la plataforma del cliente no admite ambos valores, OnClose tiene prioridad.

Compatible con complementos de Google Workspace, pero no con apps de Chat.

Enumeradores
NOTHING Valor predeterminado La tarjeta no se vuelve a cargar; no sucede nada.
RELOAD

Vuelve a cargar la tarjeta después de que se cierra la ventana secundaria.

Si se usa junto con OpenAs.OVERLAY, la ventana secundaria actúa como un cuadro de diálogo modal y la tarjeta principal se bloquea hasta que se cierra la ventana secundaria.

Texto adornado

Un widget que muestra texto con decoraciones opcionales, como una etiqueta encima o debajo del texto, un ícono delante del texto, un widget de selección o un botón después del texto.

Representación JSON
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "topLabel": string,
  "text": string,
  "wrapText": boolean,
  "bottomLabel": string,
  "onClick": {
    object (OnClick)
  },

  // Union field control can be only one of the following:
  "button": {
    object (Button)
  },
  "switchControl": {
    object (SwitchControl)
  },
  "endIcon": {
    object (Icon)
  }
  // End of list of possible types for union field control.
}
Campos
icon
(deprecated)

object ( Icon )

Se dio de baja y se reemplazó por startIcon .

startIcon

object ( Icon )

El ícono que se muestra delante del texto.

topLabel

string

El texto que aparece arriba de text Siempre trunca.

Admite formato simple. Consulta Formato de texto para obtener detalles sobre el formato.

text

string

Obligatorio. Es el texto principal.

Admite formato simple. Consulta Formato de texto para obtener detalles sobre el formato.

wrapText

boolean

La configuración de ajuste de texto Si es true , el texto se ajusta y se muestra en varias líneas. De lo contrario, se truncará.

Solo se aplica a text , no a topLabel ni bottomLabel .

bottomLabel

string

El texto que aparece debajo de text . Siempre trunca.

Admite formato simple. Consulta Formato de texto para obtener detalles sobre el formato.

onClick

object ( OnClick )

Cuando los usuarios hacen clic en topLabel o bottomLabel , se activa esta acción.

Campo de unión control . Un botón, interruptor, casilla de verificación o imagen que aparece a la derecha del texto en el widget decoratedText . control solo puede ser una de las siguientes opciones:
button

object ( Button )

Un botón en el que se puede hacer clic para activar una acción.

switchControl

object ( SwitchControl )

Se puede hacer clic en un widget de interruptor para cambiar su estado y activar una acción. Actualmente, se admite en los diálogos. Pronto se admitirán los mensajes de tarjeta.

endIcon

object ( Icon )

Un ícono que se muestra después del texto.

Admite íconos estándar y personalizados .

Ícono

Un ícono que se muestra en un widget en una tarjeta.

Admite íconos estándar y personalizados .

Representación JSON
{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string
  // End of list of possible types for union field icons.
}
Campos
altText

string

Opcional. Es una descripción del ícono que se usa para fines de accesibilidad. Si no se especifica, se proporciona un valor predeterminado. Como práctica recomendada, debes establecer una descripción útil. Por ejemplo, si un ícono muestra el retrato de la cuenta de un usuario, puedes describirlo como "Retrato de la cuenta de un usuario".

Si el ícono se muestra en un Button , este texto alternativo tiene prioridad y reemplaza el texto alternativo del botón, por lo que debes escribir texto alternativo para el botón: establece texto descriptivo que les permita a los usuarios saber lo que hace el botón. Por ejemplo, si un botón abre un hipervínculo, puedes escribir: "Abre una nueva pestaña del navegador y navega a la documentación para desarrolladores de Google Chat en https://developers.google.com/chat" .

imageType

enum ( ImageType )

El estilo de recorte aplicado a la imagen. En algunos casos, aplicar un recorte CIRCLE hace que la imagen se dibuje más grande que un ícono estándar.

Campo de unión icons . El ícono que se muestra en el widget de la tarjeta icons solo puede ser una de las siguientes opciones:
knownIcon

string

Muestra uno de los íconos estándar que proporciona Google Workspace.

Por ejemplo, para mostrar el ícono de un avión, especifica AIRPLANE . Para un autobús, especifica BUS .

Para obtener una lista completa de los íconos compatibles, consulta íconos estándar.

iconUrl

string

Muestra un ícono personalizado alojado en una URL HTTPS.

Por ejemplo:

"iconUrl":
"https://developers.google.com/chat/images/quickstart-app-avatar.png"

Los tipos de archivo compatibles incluyen .png y .jpg .

Botón

Un texto, un ícono o un botón de texto + ícono en el que los usuarios pueden hacer clic.

Para hacer que una imagen sea un botón en el que se pueda hacer clic, especifica un Image (no un ImageComponent ) y configura una acción onClick .

Representación JSON
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string
}
Campos
text

string

El texto que se muestra dentro del botón.

icon

object ( Icon )

La imagen del ícono. Si se configuran icon y text , el ícono aparece en lugar del texto.

Pronto se admitirán íconos y texto.

color

object ( Color )

Si se configura, el botón se rellenará con un color de fondo sólido y el color de fuente cambiará para mantener el contraste con el color de fondo. Por ejemplo, si estableces un fondo azul, es probable que se muestre texto blanco.

Si no la estableces, el fondo de la imagen será blanco y el color de la fuente será azul.

Para rojo, verde y azul, el valor de cada campo es un número float que se puede expresar de dos maneras: como un número entre 0 y 255 dividido por 255 (153/255) o como un valor entre 0 y 1 (0.6). 0 representa la ausencia de un color y 1 o 255/255 representan la presencia completa de ese color en la escala RGB.

De manera opcional, configura alfa, que establece un nivel de transparencia mediante esta ecuación:

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

Para alfa, un valor de 1 corresponde a un color sólido y un valor de 0 corresponde a un color completamente transparente.

Por ejemplo, el siguiente color representa un rojo medio transparente:

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
   "alpha": 0.5
}
onClick

object ( OnClick )

La acción que se realiza cuando se hace clic en el botón, como abrir un hipervínculo o ejecutar una función personalizada.

disabled

boolean

Si es true , el botón se muestra en un estado inactivo y no responde a las acciones del usuario.

altText

string

El texto alternativo utilizado para la accesibilidad.

Establece un texto descriptivo que les permita a los usuarios saber qué hace el botón. Por ejemplo, si un botón abre un hipervínculo, puedes escribir: "Abre una nueva pestaña del navegador y navega a la documentación para desarrolladores de Google Chat en https://developers.google.com/chat" .

No tiene ningún efecto cuando se establece un ícono; en su lugar, usa icon.alt_text .

Color

Representa un color en el espacio de color RGBA. Esta representación está diseñada para simplificar la conversión de representaciones de color desde varios idiomas en comparación con la compactación. Por ejemplo, los campos de esta representación se pueden proporcionar de forma trivial al constructor de java.awt.Color en Java; también se puede proporcionar de forma trivial al método +colorWithRed:green:blue:alpha de UIColor en iOS; y, con solo un poco de trabajo, se puede formatear fácilmente como una string rgba() de CSS en JavaScript.

Esta página de referencia no contiene información sobre el espacio de color absoluto que se debe usar para interpretar el valor RGB (p. ej., sRGB, Adobe RGB, DCI-P3, BT.2020, etcétera). De forma predeterminada, las aplicaciones deben asumir el espacio de color sRGB.

Cuando se debe decidir la igualdad de color, las implementaciones, a menos que se documente lo contrario, tratan dos colores como iguales si todos sus valores rojo, verde, azul y alfa difieren en un 1e-5 como máximo.

Ejemplo (Java):

 import com.google.type.Color;

 // ...
 public static java.awt.Color fromProto(Color protocolor) {
   float alpha = protocolor.hasAlpha()
       ? protocolor.getAlpha().getValue()
       : 1.0;

   return new java.awt.Color(
       protocolor.getRed(),
       protocolor.getGreen(),
       protocolor.getBlue(),
       alpha);
 }

 public static Color toProto(java.awt.Color color) {
   float red = (float) color.getRed();
   float green = (float) color.getGreen();
   float blue = (float) color.getBlue();
   float denominator = 255.0;
   Color.Builder resultBuilder =
       Color
           .newBuilder()
           .setRed(red / denominator)
           .setGreen(green / denominator)
           .setBlue(blue / denominator);
   int alpha = color.getAlpha();
   if (alpha != 255) {
     result.setAlpha(
         FloatValue
             .newBuilder()
             .setValue(((float) alpha) / denominator)
             .build());
   }
   return resultBuilder.build();
 }
 // ...

Ejemplo (iOS / Obj-C):

 // ...
 static UIColor* fromProto(Color* protocolor) {
    float red = [protocolor red];
    float green = [protocolor green];
    float blue = [protocolor blue];
    FloatValue* alpha_wrapper = [protocolor alpha];
    float alpha = 1.0;
    if (alpha_wrapper != nil) {
      alpha = [alpha_wrapper value];
    }
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
 }

 static Color* toProto(UIColor* color) {
     CGFloat red, green, blue, alpha;
     if (![color getRed:&red green:&green blue:&blue alpha:&alpha]) {
       return nil;
     }
     Color* result = [[Color alloc] init];
     [result setRed:red];
     [result setGreen:green];
     [result setBlue:blue];
     if (alpha <= 0.9999) {
       [result setAlpha:floatWrapperWithValue(alpha)];
     }
     [result autorelease];
     return result;
}
// ...

Ejemplo (JavaScript):

// ...

var protoToCssColor = function(rgb_color) {
   var redFrac = rgb_color.red || 0.0;
   var greenFrac = rgb_color.green || 0.0;
   var blueFrac = rgb_color.blue || 0.0;
   var red = Math.floor(redFrac * 255);
   var green = Math.floor(greenFrac * 255);
   var blue = Math.floor(blueFrac * 255);

   if (!('alpha' in rgb_color)) {
      return rgbToCssColor(red, green, blue);
   }

   var alphaFrac = rgb_color.alpha.value || 0.0;
   var rgbParams = [red, green, blue].join(',');
   return ['rgba(', rgbParams, ',', alphaFrac, ')'].join('');
};

var rgbToCssColor = function(red, green, blue) {
  var rgbNumber = new Number((red << 16) | (green << 8) | blue);
  var hexString = rgbNumber.toString(16);
  var missingZeros = 6 - hexString.length;
  var resultBuilder = ['#'];
  for (var i = 0; i < missingZeros; i++) {
     resultBuilder.push('0');
  }
  resultBuilder.push(hexString);
  return resultBuilder.join('');
};

// ...
Representación JSON
{
  "red": number,
  "green": number,
  "blue": number,
  "alpha": number
}
Campos
red

number

La cantidad de rojo en el color como un valor en el intervalo [0, 1].

green

number

La cantidad de verde en el color como un valor en el intervalo [0, 1].

blue

number

La cantidad de azul en el color como un valor en el intervalo [0, 1].

alpha

number

La fracción de este color que se debe aplicar al píxel. Es decir, el color del píxel final se define mediante la siguiente ecuación:

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

Esto significa que el valor 1.0 corresponde a un color sólido, mientras que el valor 0.0 corresponde a un color completamente transparente. Esto utiliza un mensaje de wrapper en lugar de un escalar flotante simple, para que sea posible distinguir entre un valor predeterminado y el valor que no se configura. Si se omite, este objeto de color se representa como un color sólido (como si el valor alfa se hubiese dado de forma explícita un valor de 1.0).

SwitchControl

Un interruptor de estilo de activación o una casilla de verificación dentro de un widget decoratedText .

Solo es compatible con el widget decoratedText .

Actualmente, se admite en los diálogos. Pronto se admitirán los mensajes de tarjeta.

Representación JSON
{
  "name": string,
  "value": string,
  "selected": boolean,
  "onChangeAction": {
    object (Action)
  },
  "controlType": enum (ControlType)
}
Campos
name

string

El nombre por el que se identifica el widget del interruptor en un evento de entrada del formulario.

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.

value

string

El valor ingresado por un usuario, que se muestra como parte de un evento de entrada del formulario.

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.

selected

boolean

Cuando sea true , el interruptor estará seleccionado.

onChangeAction

object ( Action )

La acción que se realiza cuando se cambia el estado del interruptor, como la función que se ejecutará.

controlType

enum ( ControlType )

Cómo aparece el interruptor en la interfaz de usuario

Tipo de control

Cómo aparece el interruptor en la interfaz de usuario

Enumeradores
SWITCH Un interruptor para activar o desactivar el estilo
CHECKBOX Se dio de baja y se reemplazó por CHECK_BOX .
CHECK_BOX Una casilla de verificación.

Lista de botones

Una lista de botones dispuestos horizontalmente.

Representación JSON
{
  "buttons": [
    {
      object (Button)
    }
  ]
}
Campos
buttons[]

object ( Button )

Un arreglo de botones.

TextInput

Un campo en el que los usuarios pueden ingresar texto. Admite sugerencias y acciones de cambio.

Las apps de chat reciben y pueden procesar el valor del texto ingresado durante los eventos de entrada del formulario. Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.

Cuando necesites recopilar datos abstractos de los usuarios, usa una entrada de texto. Para recopilar datos definidos de los usuarios, usa el widget de entrada de selección.

Solo es compatible con los diálogos. Pronto se admitirán los mensajes de tarjeta.

Representación JSON
{
  "name": string,
  "label": string,
  "hintText": string,
  "value": string,
  "type": enum (Type),
  "onChangeAction": {
    object (Action)
  },
  "initialSuggestions": {
    object (Suggestions)
  },
  "autoCompleteAction": {
    object (Action)
  }
}
Campos
name

string

El nombre con el que se identifica la entrada de texto en un evento de entrada de formulario.

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.

label

string

El texto que aparece sobre el campo de entrada de texto en la interfaz de usuario

Especifica el texto que ayuda al usuario a ingresar la información que tu app necesita. Por ejemplo, si le pides el nombre a alguien, pero necesitas su apellido específicamente, escribe "apellido" en lugar de "nombre".

Es obligatorio si no se especifica hintText . De lo contrario, es opcional.

hintText

string

Texto que aparece dentro del campo de entrada de texto con el fin de ayudar a los usuarios al solicitarles que ingresen un valor determinado. Este texto no será visible después de que los usuarios comiencen a escribir.

Es obligatorio si no se especifica label . De lo contrario, es opcional.

value

string

El valor ingresado por un usuario, que se muestra como parte de un evento de entrada del formulario.

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.

type

enum ( Type )

Cómo aparece un campo de entrada de texto en la interfaz de usuario Por ejemplo, si el campo es de una o varias líneas.

onChangeAction

object ( Action )

Qué hacer cuando se produce un cambio en el campo de entrada de texto

Entre los ejemplos de cambios se incluyen agregar un usuario al campo o borrar texto.

Entre los ejemplos de acciones que se pueden realizar, se incluye ejecutar una función personalizada o abrir un diálogo en Google Chat.

initialSuggestions

object ( Suggestions )

Valores sugeridos que los usuarios pueden ingresar. Estos valores aparecen cuando los usuarios hacen clic dentro del campo de entrada de texto. A medida que los usuarios escriben, los valores sugeridos se filtran de forma dinámica para coincidir con lo que escriben los usuarios.

Por ejemplo, un campo de entrada de texto para el lenguaje de programación podría sugerir Java, JavaScript, Python y C++. Cuando los usuarios comienzan a escribir "Jav", la lista de filtros de sugerencias muestra únicamente Java y JavaScript.

Los valores sugeridos ayudan a los usuarios a ingresar valores que tu app puede comprender. Al hacer referencia a JavaScript, algunos usuarios pueden ingresar "javascript" y otros, "java script". Si se sugiere "JavaScript", se pueden estandarizar el modo en que los usuarios interactúan con la aplicación.

Cuando se especifica, TextInput.type siempre es SINGLE_LINE , incluso si está configurado como MULTIPLE_LINE .

autoCompleteAction

object ( Action )

Opcional. Especifica qué acción se debe realizar cuando el campo de entrada de texto proporciona sugerencias a los usuarios que interactúan con él.

Si no se especifica, initialSuggestions establece las sugerencias y el cliente las procesa.

Si se especifica, la app realiza la acción que se especifica aquí, como ejecutar una función personalizada.

Compatible con complementos de Google Workspace, pero no con apps de Chat. La compatibilidad con las apps de Chat estará disponible próximamente.

Tipo

Cómo aparece un campo de entrada de texto en la interfaz de usuario Por ejemplo, si se trata de un campo de entrada de una sola línea o de varias líneas.

Si se especifica initialSuggestions , type siempre es SINGLE_LINE , incluso si está configurado como MULTIPLE_LINE .

Enumeradores
SINGLE_LINE El campo de entrada de texto tiene una altura fija de una línea.
MULTIPLE_LINE El campo de entrada de texto tiene una altura fija de varias líneas.

Sugerencias

Valores sugeridos que los usuarios pueden ingresar. Estos valores aparecen cuando los usuarios hacen clic dentro del campo de entrada de texto. A medida que los usuarios escriben, los valores sugeridos se filtran de forma dinámica para coincidir con lo que escriben los usuarios.

Por ejemplo, un campo de entrada de texto para el lenguaje de programación podría sugerir Java, JavaScript, Python y C++. Cuando los usuarios comienzan a escribir "Jav", la lista de filtros de sugerencias muestra únicamente Java y JavaScript.

Los valores sugeridos ayudan a los usuarios a ingresar valores que tu app puede comprender. Al hacer referencia a JavaScript, algunos usuarios pueden ingresar "javascript" y otros, "java script". Si se sugiere "JavaScript", se pueden estandarizar el modo en que los usuarios interactúan con la aplicación.

Cuando se especifica, TextInput.type siempre es SINGLE_LINE , incluso si está configurado como MULTIPLE_LINE .

Representación JSON
{
  "items": [
    {
      object (SuggestionItem)
    }
  ]
}
Campos
items[]

object ( SuggestionItem )

Una lista de sugerencias que se usan para las recomendaciones de autocompletado en los campos de entrada de texto.

Elemento de sugerencia

Un valor sugerido que los usuarios pueden ingresar en un campo de entrada de texto.

Representación JSON
{
  "text": string
}
Campos
text

string

El valor de una entrada sugerida para un campo de entrada de texto. Esto equivale a lo que los usuarios ingresarían.

Selección de entrada

Un widget que crea un elemento de la IU con opciones para que seleccionen los usuarios. Por ejemplo, un menú desplegable o una lista de verificación.

Las apps de chat reciben y pueden procesar el valor del texto ingresado durante los eventos de entrada del formulario. Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.

Cuando necesite recopilar datos de los usuarios que coincidan con las opciones que configuró, utilice una entrada de selección. Para recopilar datos abstractos de los usuarios, usa el widget de entrada de texto.

Solo es compatible con los diálogos. Pronto se admitirán los mensajes de tarjeta.

Representación JSON
{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  }
}
Campos
name

string

El nombre con el que se identifica la entrada de selección en un evento de entrada de formulario.

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.

label

string

El texto que aparece sobre el campo de entrada de selección en la interfaz de usuario.

Especifica el texto que ayuda al usuario a ingresar la información que tu app necesita. Por ejemplo, si los usuarios seleccionan la urgencia de un ticket de trabajo desde un menú desplegable, la etiqueta puede ser "Urgencia" o "Seleccionar urgencia".

type

enum ( SelectionType )

La forma en que se muestra una opción a los usuarios. Las diferentes opciones admiten diferentes tipos de interacciones. Por ejemplo, los usuarios pueden habilitar varias casillas de verificación, pero solo pueden seleccionar un valor de un menú desplegable.

Cada entrada de selección admite un tipo de selección. Por ejemplo, no se pueden combinar interruptores y casillas de verificación.

items[]

object ( SelectionItem )

Un arreglo de los elementos seleccionados. Por ejemplo, todas las casillas de verificación seleccionadas.

onChangeAction

object ( Action )

Si se especifica, el formulario se envía cuando cambia la selección. Si no se especifica, se debe especificar un botón aparte que envíe el formulario.

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.

Tipo de selección

La forma en que se muestra una opción a los usuarios. Las diferentes opciones admiten diferentes tipos de interacciones. Por ejemplo, los usuarios pueden habilitar varias casillas de verificación, pero solo pueden seleccionar un valor de un menú desplegable.

Cada entrada de selección admite un tipo de selección. Por ejemplo, no se pueden combinar interruptores y casillas de verificación.

Actualmente, se admite en los diálogos. Pronto se admitirán los mensajes de tarjeta.

Enumeradores
CHECK_BOX

Un conjunto de casillas de verificación. Los usuarios pueden seleccionar varias casillas de verificación por cada entrada de selección.

Actualmente, se admite en los diálogos. Pronto se admitirán los mensajes de tarjeta.

RADIO_BUTTON

Un conjunto de botones de selección Los usuarios pueden seleccionar un botón de selección por entrada de selección.

Actualmente, se admite en los diálogos. Pronto se admitirán los mensajes de tarjeta.

SWITCH

Un conjunto de interruptores. Los usuarios pueden activar varios interruptores a la vez por cada entrada de selección.

Actualmente, se admite en los diálogos. Pronto se admitirán los mensajes de tarjeta.

DROPDOWN

Un menú desplegable Los usuarios pueden seleccionar un elemento del menú desplegable por entrada de selección.

Actualmente, se admite en los diálogos. Pronto se admitirán los mensajes de tarjeta.

Elemento de selección

Un elemento seleccionable en una entrada de selección, como una casilla de verificación o un interruptor.

Representación JSON
{
  "text": string,
  "value": string,
  "selected": boolean
}
Campos
text

string

Es el texto que se muestra a los usuarios.

value

string

El valor asociado a este elemento. El cliente debe usar esto como un valor de entrada de formulario.

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.

selected

boolean

Cuando se selecciona true , se selecciona más de un elemento. Si se selecciona más de un elemento para los botones de selección y los menús desplegables, se recibe el primer elemento seleccionado y se ignoran los siguientes.

Selector de fecha y hora

Permite que los usuarios especifiquen una fecha, una hora o ambas.

Acepta entradas de texto de los usuarios, pero muestra un selector de fecha y hora interactivo que ayuda a los usuarios a ingresar las fechas y horas con el formato correcto. Si los usuarios ingresan una fecha o una hora incorrectas, el widget muestra un error que les indica que ingresen el formato correcto.

No es compatible con las apps de Chat. La compatibilidad con las apps de Chat estará disponible próximamente.

Representación JSON
{
  "name": string,
  "label": string,
  "type": enum (DateTimePickerType),
  "valueMsEpoch": string,
  "timezoneOffsetDate": integer,
  "onChangeAction": {
    object (Action)
  }
}
Campos
name

string

El nombre por el que se identifica el selector de fecha y hora en un evento de entrada del formulario.

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.

label

string

Es el texto que solicita a los usuarios ingresar una fecha, una hora o una fecha y hora.

Especifica el texto que ayuda al usuario a ingresar la información que tu app necesita. Por ejemplo, si los usuarios configuran una cita, una etiqueta como "Fecha de la cita" o "Fecha y hora de la cita" podría funcionar bien.

type

enum ( DateTimePickerType )

Qué tipo de entrada de fecha y hora admite el selector de fecha y hora

valueMsEpoch

string ( int64 format)

Valor que se muestra como valor predeterminado antes de la entrada del usuario o anterior, representado en milisegundos (Tiempo de época).

Para el tipo DATE_AND_TIME , se usa el valor de ciclo de entrenamiento completo.

Para el tipo DATE_ONLY , solo se usa la fecha de la época.

Para el tipo TIME_ONLY , solo se usa la hora de la época. Por ejemplo, para representar 3:00 a.m., configura la época en 3 * 60 * 60 * 1000 .

timezoneOffsetDate

integer

Número en minutos que representa el desplazamiento de la zona horaria y el UTC. Si se configura, valueMsEpoch se muestra en la zona horaria especificada. Si no se establece, se utiliza la configuración de zona horaria del usuario del cliente.

onChangeAction

object ( Action )

Se activa cuando el usuario hace clic en Guardar o Borrar desde la interfaz del selector de fecha y hora.

Tipo de fecha y hora

Qué tipo de entrada de fecha y hora admite el selector de fecha y hora

Enumeradores
DATE_AND_TIME El usuario puede seleccionar una fecha y una hora.
DATE_ONLY El usuario solo puede seleccionar una fecha.
TIME_ONLY El usuario solo puede seleccionar una hora.

Divisor

Muestra un divisor entre widgets, una línea horizontal.

Por ejemplo, el siguiente JSON crea un divisor:

"divider": {
}

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 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.

Actualmente, se admite en los diálogos. Pronto se admitirán los mensajes de tarjeta.

Por ejemplo, el siguiente JSON crea una cuadrícula de 2 columnas con un solo elemento:

"grid": {
  "title": "A fine collection of items",
  "numColumns": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4.0
  },
  "items": [
    "image": {
      "imageUri": "https://www.example.com/image.png",
      "cropStyle": {
        "type": "SQUARE"
      },
      "borderStyle": {
        "type": "STROKE"
      }
    },
    "title": "An item",
    "textAlignment": "CENTER"
  ],
  "onClick": {
    "openLink": {
      "url":"https://www.example.com"
    }
  }
}
Representación JSON
{
  "title": string,
  "items": [
    {
      object (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
Campos
title

string

El texto que se muestra en el encabezado de la cuadrícula

items[]

object ( GridItem )

Los elementos que se mostrarán en la cuadrícula

borderStyle

object ( BorderStyle )

El estilo de borde que se aplica a cada elemento de la cuadrícula.

columnCount

integer

La cantidad de columnas que se mostrarán en la cuadrícula. Si no se especifica este campo, se utiliza un valor predeterminado que varía según dónde se muestre la cuadrícula (diálogo o complemento).

onClick

object ( OnClick )

Cada devolución de llamada se vuelve a usar en cada cuadrícula individual, pero con el identificador y el índice del elemento en la lista de elementos agregados a los parámetros de la devolución de llamada.

Cuadrícula

Representa un solo elemento en el diseño de cuadrícula.

Representación JSON
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
Campos
id

string

Es un identificador especificado por el usuario para este elemento de la cuadrícula. Este identificador se muestra en los parámetros de devolución de llamada onClick de la cuadrícula principal.

image

object ( ImageComponent )

La imagen que se muestra en el elemento de cuadrícula.

title

string

El título del elemento de la cuadrícula.

subtitle

string

Es el subtítulo del elemento de la cuadrícula.

layout

enum ( GridItemLayout )

El diseño que se usará para el elemento de la cuadrícula.

Componente de la imagen

Representa una imagen.

Representación JSON
{
  "imageUri": string,
  "altText": string,
  "cropStyle": {
    object (ImageCropStyle)
  },
  "borderStyle": {
    object (BorderStyle)
  }
}
Campos
imageUri

string

La URL de la imagen.

altText

string

La etiqueta de accesibilidad de la imagen.

cropStyle

object ( ImageCropStyle )

El estilo de recorte que se aplicará a la imagen.

borderStyle

object ( BorderStyle )

El estilo de borde que se aplicará a la imagen.

ImagenRecortarEstilo

Representa el estilo de recorte aplicado a una imagen.

Por ejemplo, aquí te mostramos cómo aplicar una relación de aspecto de 16 x 9:

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
Representación JSON
{
  "type": enum (ImageCropType),
  "aspectRatio": number
}
Campos
type

enum ( ImageCropType )

El tipo de recorte.

aspectRatio

number

La relación de aspecto que se usará si el tipo de recorte es RECTANGLE_CUSTOM .

Por ejemplo, aquí te mostramos cómo aplicar una relación de aspecto de 16 x 9:

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}

Tipo de imagen

Representa el estilo de recorte aplicado a una imagen.

Enumeradores
IMAGE_CROP_TYPE_UNSPECIFIED No se especificó ningún valor. No lo utilices.
SQUARE Valor predeterminado Aplica un recorte cuadrado.
CIRCLE Aplica un recorte circular.
RECTANGLE_CUSTOM Aplica un recorte rectangular con una proporción personalizada. Establece la proporción personalizada con aspectRatio .
RECTANGLE_4_3 Aplica un recorte rectangular con una proporción de 4:3.

Estilo de borde

Representa el estilo de borde completo que se aplica a los elementos de un widget.

Representación JSON
{
  "type": enum (BorderType),
  "strokeColor": {
    object (Color)
  },
  "cornerRadius": integer
}
Campos
type

enum ( BorderType )

El tipo de borde.

strokeColor

object ( Color )

Los colores que se usarán cuando el tipo sea BORDER_TYPE_STROKE .

cornerRadius

integer

El radio de la esquina del borde.

Tipo de borde

Representa los tipos de bordes que se aplican a los widgets.

Enumeradores
BORDER_TYPE_UNSPECIFIED No se especificó ningún valor.
NO_BORDER Valor predeterminado Sin borde.
STROKE Esquema.

GridItemLayout

Representa las diversas opciones de diseño disponibles para un elemento de cuadrícula.

Enumeradores
GRID_ITEM_LAYOUT_UNSPECIFIED No se especificó ningún diseño.
TEXT_BELOW El título y el subtítulo se muestran debajo de la imagen del elemento de la cuadrícula.
TEXT_ABOVE El título y el subtítulo se muestran sobre la imagen de la cuadrícula.

Acción de tarjeta

Una acción de tarjeta es la acción asociada con la tarjeta. Por ejemplo, una tarjeta de factura puede incluir acciones como borrar factura, enviar una factura por correo electrónico o abrirla en un navegador.

No es compatible con las apps de Chat.

Representación JSON
{
  "actionLabel": string,
  "onClick": {
    object (OnClick)
  }
}
Campos
actionLabel

string

La etiqueta que aparece como el elemento de menú de acciones.

onClick

object ( OnClick )

La acción onClick para este elemento de acción.

Pie de página corregido

Es un pie de página persistente (fijo) que aparece en la parte inferior de la tarjeta.

Establecer fixedFooter sin especificar un primaryButton o secondaryButton genera un error.

Las apps de chat admiten fixedFooter en diálogos , pero no en mensajes de tarjetas .

Representación JSON
{
  "primaryButton": {
    object (Button)
  },
  "secondaryButton": {
    object (Button)
  }
}
Campos
primaryButton

object ( Button )

El botón principal del pie de página fijo. Debe ser un botón de texto con texto y color establecidos.

secondaryButton

object ( Button )

El botón secundario del pie de página fijo. Debe ser un botón de texto con texto y color establecidos. primaryButton se debe establecer si se configura secondaryButton .

Estilo de visualización

En los complementos de Google Workspace, determina cómo se muestra una tarjeta.

No es compatible con las apps de Chat.

Enumeradores
DISPLAY_STYLE_UNSPECIFIED No lo utilices.
PEEK El encabezado de la tarjeta aparece en la parte inferior de la barra lateral y cubre parcialmente la tarjeta superior actual de la pila. Al hacer clic en el encabezado, aparece la tarjeta en la pila. Si la tarjeta no tiene encabezado, se usa uno generado en su lugar.
REPLACE Valor predeterminado La tarjeta se muestra reemplazando la vista de la tarjeta superior en la pila.