Cards v2

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Открытка

Карточки поддерживают определенный макет, интерактивные элементы пользовательского интерфейса, такие как кнопки, и мультимедийные элементы, такие как изображения. Используйте карточки для предоставления подробной информации, сбора информации от пользователей и подсказок пользователям, чтобы сделать следующий шаг.

В Google Chat карточки появляются в нескольких местах:

  • Как отдельные сообщения.
  • Сопровождение текстового сообщения, непосредственно под текстовым сообщением.
  • Как диалог .

В следующем примере JSON создает «карточку контакта», которая включает:

  • Заголовок с именем контакта, должностью, изображением аватара.
  • Раздел с контактной информацией, включая форматированный текст.
  • Кнопки, которые пользователи могут нажать, чтобы поделиться контактом или просмотреть больше или меньше информации.

Пример карточки контакта

{
  "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",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}
Представление JSON
{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}
Поля
header

object ( CardHeader )

Заголовок карты. Заголовок обычно содержит начальное изображение и заголовок. Заголовки всегда появляются в верхней части карточки.

sections[]

object ( Section )

Содержит набор виджетов. Каждый раздел имеет свой собственный необязательный заголовок. Секции визуально разделены разделителем строк.

cardActions[]

object ( CardAction )

Действия карты. Действия добавляются в меню панели инструментов карточки.

Поскольку у карточек приложений Chat нет панели инструментов, cardActions[] не поддерживается приложениями Chat.

Например, следующий код JSON создает меню действий карты с параметрами «Настройки» и «Отправить отзыв»:

"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

Название карты. Используется как идентификатор карты в карточной навигации.

Поскольку приложения для чата не поддерживают карточную навигацию, они игнорируют это поле.

displayStyle

enum ( DisplayStyle )

В надстройках Google Workspace задает свойства отображения peekCardHeader .

Не поддерживается приложениями для чата.

peekCardHeader

object ( CardHeader )

При отображении контекстного контента заголовок карточки просмотра выступает в качестве заполнителя, чтобы пользователь мог перемещаться вперед между карточками домашней страницы и контекстными карточками.

Не поддерживается приложениями для чата.

Заголовок карты

Представляет заголовок карточки.

Представление JSON
{
  "title": string,
  "subtitle": string,
  "imageType": enum (ImageType),
  "imageUrl": string,
  "imageAltText": string
}
Поля
title

string

Необходимый. Название заголовка карты. Заголовок имеет фиксированную высоту: если указаны и заголовок, и подзаголовок, каждый из них занимает одну строку. Если указано только название, оно занимает обе строки.

subtitle

string

Подзаголовок заголовка карточки. Если указано, отображается на отдельной строке под title .

imageType

enum ( ImageType )

Форма, используемая для обрезки изображения.

imageUrl

string

URL-адрес HTTPS изображения в заголовке карточки.

imageAltText

string

Альтернативный текст этого изображения, который используется для доступности.

Тип изображения

Форма, используемая для обрезки изображения.

перечисления
SQUARE Значение по умолчанию. Применяет к изображению квадратную маску. Например, изображение 4x3 становится 3x3.
CIRCLE Применяет круговую маску к изображению. Например, изображение 4x3 становится кругом диаметром 3.

Раздел

Раздел содержит коллекцию виджетов, отображаемых вертикально в том порядке, в котором они указаны.

Представление JSON
{
  "header": string,
  "widgets": [
    {
      object (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer
}
Поля
header

string

Текст, который появляется в верхней части раздела. Поддерживает простой текст в формате HTML .

widgets[]

object ( Widget )

Все виджеты в разделе. Должен содержать хотя бы 1 виджет.

collapsible

boolean

Указывает, является ли этот раздел сворачиваемым.

Сворачиваемые разделы скрывают некоторые или все виджеты, но пользователи могут развернуть раздел, чтобы отобразить скрытые виджеты, щелкнув Показать больше . Пользователи могут снова скрыть виджеты, щелкнув Показать меньше .

Чтобы определить, какие виджеты скрыты, укажите uncollapsibleWidgetsCount .

uncollapsibleWidgetsCount

integer

Количество несворачиваемых виджетов, которые остаются видимыми, даже если раздел свернут.

Например, если раздел содержит пять виджетов и для параметра uncollapsibleWidgetsCount установлено значение 2 , всегда отображаются первые два виджета, а последние три по умолчанию свернуты. Значение uncollapsibleWidgetsCount учитывается только в том случае, если для collapsible установлено значение true .

Виджет

Каждая карта состоит из виджетов.

Виджет — это составной объект, который может представлять собой текст, изображения, кнопки и другие типы объектов.

Представление 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.
}
Поля
data поля объединения. Виджет может иметь только один из следующих элементов. Вы можете использовать несколько полей виджета для отображения большего количества элементов. data могут быть только одним из следующих:
textParagraph

object ( TextParagraph )

Отображает текстовый абзац. Поддерживает простой текст в формате HTML .

Например, следующий JSON создает полужирный текст:

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

object ( Image )

Отображает изображение.

Например, следующий JSON создает изображение с альтернативным текстом:

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

object ( DecoratedText )

Отображает оформленный текстовый элемент.

Например, следующий JSON создает оформленный текстовый виджет, показывающий адрес электронной почты:

"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 )

Список кнопок.

Например, следующий JSON создает две кнопки. Первая — это синяя текстовая кнопка, а вторая — кнопка с изображением, которая открывает ссылку:

"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 )

Отображает текстовое поле, в которое пользователи могут вводить текст.

В настоящее время поддерживается в диалогах . Поддержка карточных сообщений появится в ближайшее время.

Например, следующий JSON создает текстовый ввод для адреса электронной почты:

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

В качестве другого примера следующий JSON создает текстовый ввод для языка программирования со статическими предложениями:

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

object ( SelectionInput )

Отображает элемент управления выбором, который позволяет пользователям выбирать элементы. Элементы управления выбором могут быть флажками, переключателями, переключателями или раскрывающимися меню.

В настоящее время поддерживается в диалогах . Поддержка карточных сообщений появится в ближайшее время.

Например, следующий JSON создает раскрывающееся меню, позволяющее пользователям выбирать размер:

"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 )

Отображает виджет выбора/ввода даты, времени или даты и времени.

Не поддерживается приложениями для чата. Поддержка приложений чата появится в ближайшее время.

Например, следующий JSON создает средство выбора даты и времени для планирования встречи:

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

object ( Divider )

Отображает разделитель горизонтальной линии между виджетами.

Например, следующий JSON создает разделитель:

"divider": {
}
grid

object ( Grid )

Отображает сетку с набором элементов.

Сетка поддерживает любое количество столбцов и элементов. Количество строк определяется верхней границей количества элементов, деленной на количество столбцов. Сетка с 10 элементами и 2 столбцами имеет 5 строк. Сетка с 11 элементами и 2 столбцами имеет 6 строк.

В настоящее время поддерживается в диалогах . Поддержка карточных сообщений появится в ближайшее время.

Например, следующий JSON создает сетку из двух столбцов с одним элементом:

"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"
    }
  }
}

Текстовый Параграф

Абзац текста, который поддерживает форматирование. Дополнительные сведения см. в разделе Форматирование текста .

Представление JSON
{
  "text": string
}
Поля
text

string

Текст, отображаемый в виджете.

Изображение

Изображение, указанное с помощью URL-адреса, которое может иметь действие onClick .

Представление JSON
{
  "imageUrl": string,
  "onClick": {
    object (OnClick)
  },
  "altText": string
}
Поля
imageUrl

string

URL-адрес https , на котором размещено изображение.

Например:

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

object ( OnClick )

Когда пользователь нажимает на изображение, щелчок запускает это действие.

altText

string

Альтернативный текст этого изображения, используемый для доступности.

По щелчку

Представляет, как реагировать, когда пользователи щелкают интерактивный элемент на карточке, например кнопку.

Представление 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.
}
Поля

data поля объединения.

data могут быть только одним из следующих:

action

object ( Action )

Если указано, действие запускается этим onClick .

card

object ( Card )

Новая карта помещается в стопку карт после щелчка, если он указан.

Поддерживается надстройками Google Workspace, но не приложениями для чата.

Действие

Действие, описывающее поведение при отправке формы. Например, для обработки формы можно вызвать скрипт приложений.

Представление JSON
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction)
}
Поля
function

string

Настраиваемая функция, которая вызывается при нажатии на содержащий элемент или другой активации.

Пример использования см. в разделе Создание интерактивных карточек .

parameters[]

object ( ActionParameter )

Список параметров действия.

loadIndicator

enum ( LoadIndicator )

Задает индикатор загрузки, отображаемый действием при вызове действия.

persistValues

boolean

Указывает, сохраняются ли значения формы после действия. Значение по умолчанию — false .

Если true , значения формы остаются после запуска действия. При использовании LoadIndicator.NONE для действий рекомендуется persistValues ​​= true , так как это гарантирует, что любые изменения, сделанные пользователем после отправки формы или действий по изменению на сервер, не будут перезаписаны ответом.

Если false , значения формы очищаются при запуске действия. Если persistValues ​​задано значение false , настоятельно рекомендуется, чтобы карта использовала LoadIndicator.SPINNER для всех действий, так как это блокирует пользовательский интерфейс, чтобы гарантировать, что пользователь не внесет никаких изменений во время обработки действия.

Не поддерживается приложениями для чата.

interaction

enum ( Interaction )

По желанию. Требуется при открытии диалога .

Что делать в ответ на взаимодействие с пользователем, например, когда пользователь нажимает кнопку в сообщении карточки.

Если не указано, приложение отвечает выполнением action — например, открытием ссылки или запуском функции — как обычно.

Указав interaction , приложение может реагировать специальными интерактивными способами. Например, установив для interaction значение OPEN_DIALOG , приложение может открыть диалоговое окно .

Когда указано, индикатор загрузки не отображается.

Поддерживается приложениями для чата, но не надстройками Google Workspace. Если указано для надстройки, вся карточка зачищается и в клиенте ничего не показывается.

Параметр действия

Список строковых параметров для предоставления при вызове метода действия. Например, рассмотрим три кнопки повтора: отложить сейчас, отложить на 1 день, отложить на следующей неделе. Вы можете использовать action method = snooze(), передав тип повтора и время повтора в списке строковых параметров.

Чтобы узнать больше, см. CommonEventObject .

Представление JSON
{
  "key": string,
  "value": string
}
Поля
key

string

Имя параметра для сценария действия.

value

string

Значение параметра.

Индикатор нагрузки

Задает индикатор загрузки, отображаемый действием при вызове действия.

перечисления
SPINNER Отображает счетчик, указывающий, что контент загружается.
NONE Ничего не отображается.

Взаимодействие

По желанию. Требуется при открытии диалога .

Что делать в ответ на взаимодействие с пользователем, например, когда пользователь нажимает кнопку в сообщении карточки.

Если не указано, приложение отвечает выполнением action — например, открытием ссылки или запуском функции — как обычно.

Указав interaction , приложение может реагировать специальными интерактивными способами. Например, установив для interaction значение OPEN_DIALOG , приложение может открыть диалоговое окно .

Когда указано, индикатор загрузки не отображается.

Поддерживается приложениями для чата, но не надстройками Google Workspace. Если указано для надстройки, вся карточка зачищается и в клиенте ничего не показывается.

перечисления
INTERACTION_UNSPECIFIED Значение по умолчанию. action выполняется как обычно.
OPEN_DIALOG

Открывает диалог , оконный карточный интерфейс, который приложения Chat используют для взаимодействия с пользователями.

Поддерживается только приложениями чата в ответ на нажатия кнопок на сообщениях карточек.

Не поддерживается надстройками Google Workspace. Если указано для надстройки, вся карточка зачищается и в клиенте ничего не показывается.

Открыть как

Когда OnClick открывает ссылку, клиент может либо открыть ее как полноразмерное окно (если это фрейм, используемый клиентом), либо как наложение (например, всплывающее окно). Реализация зависит от возможностей клиентской платформы, и выбранное значение может быть проигнорировано, если клиент его не поддерживает. FULL_SIZE поддерживается всеми клиентами.

Поддерживается надстройками Google Workspace, но не приложениями для чата.

перечисления
FULL_SIZE Ссылка открывается как полноразмерное окно (если это фрейм, используемый клиентом.
OVERLAY Ссылка открывается как наложение, например всплывающее окно.

При закрытии

Что делает клиент, когда ссылка, открытая действием OnClick , закрывается.

Реализация зависит от возможностей клиентской платформы. Например, веб-браузер может открыть ссылку во всплывающем окне с обработчиком OnClose .

Если установлены оба обработчика OnOpen и OnClose , а клиентская платформа не может поддерживать оба значения, приоритет имеет OnClose .

Поддерживается надстройками Google Workspace, но не приложениями для чата.

перечисления
NOTHING Значение по умолчанию. Карта не перезагружается; Ничего не произошло.
RELOAD

Перезагружает карту после закрытия дочернего окна.

При использовании в сочетании с OpenAs.OVERLAY дочернее окно действует как модальное диалоговое окно, а родительская карточка блокируется до закрытия дочернего окна.

УкрашенныйТекст

Виджет, который отображает текст с дополнительными украшениями, такими как метка над или под текстом, значок перед текстом, виджет выбора или кнопка после текста.

Представление 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.
}
Поля
icon
(deprecated)

object ( Icon )

Устарело в пользу startIcon .

startIcon

object ( Icon )

Значок отображается перед текстом.

topLabel

string

Текст, который появляется над text . Всегда усекает.

Поддерживает простое форматирование. Подробнее о форматировании см. в разделе Форматирование текста .

text

string

Необходимый. Основной текст.

Поддерживает простое форматирование. Подробнее о форматировании см. в разделе Форматирование текста .

wrapText

boolean

Настройка переноса текста. Если true , текст переносится и отображается на нескольких строках. В противном случае текст обрезается.

Применяется только к text , но не topLabel и bottomLabel .

bottomLabel

string

Текст, который появляется под text . Всегда усекает.

Поддерживает простое форматирование. Подробнее о форматировании см. в разделе Форматирование текста .

onClick

object ( OnClick )

Это действие срабатывает, когда пользователи нажимают на topLabel или bottomLabel .

Союз полевой control . Кнопка, переключатель, флажок или изображение, которое появляется справа от текста в виджете decoratedText . control может быть только одним из следующих:
button

object ( Button )

Кнопка, которую можно нажать, чтобы вызвать действие.

switchControl

object ( SwitchControl )

Виджет-переключатель можно щелкнуть, чтобы изменить его состояние и запустить действие. В настоящее время поддерживается в диалогах . Поддержка карточных сообщений появится в ближайшее время.

endIcon

object ( Icon )

Значок, отображаемый после текста.

Поддерживает стандартные и пользовательские значки.

Значок

Значок, отображаемый в виджете на карточке.

Поддерживает стандартные и пользовательские значки.

Представление 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.
}
Поля
altText

string

По желанию. Описание значка, используемого для специальных возможностей. Если не указано, предоставляется значение по умолчанию. Лучше всего установить полезное описание. Например, если на значке отображается изображение учетной записи пользователя, вы можете описать его как «Портрет учетной записи пользователя».

Если значок отображается в Button , этот альтернативный текст имеет приоритет и перезаписывает альтернативный текст кнопки, поэтому вы должны написать альтернативный текст для кнопки: Установите описательный текст, который позволяет пользователям узнать, что делает кнопка. Например, если кнопка открывает гиперссылку, вы можете написать: «Открывает новую вкладку браузера и переходит к документации разработчика Google Chat по адресу https://developers.google.com/chat» .

imageType

enum ( ImageType )

Стиль обрезки, примененный к изображению. В некоторых случаях применение обрезки CIRCLE приводит к тому, что изображение становится больше стандартного значка.

icons поля Союза. Иконка отображается в виджете на карточке. icons могут быть только одним из следующих:
knownIcon

string

Отобразите один из стандартных значков, предоставляемых Google Workspace.

Например, чтобы отобразить значок самолета, укажите AIRPLANE . Для шины укажите BUS .

Полный список поддерживаемых значков см. в разделе стандартные значки .

iconUrl

string

Отображение пользовательского значка, размещенного по URL-адресу HTTPS.

Например:

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

Поддерживаемые типы файлов включают .png и .jpg .

Кнопка

Кнопка с текстом, значком или текстом + значком, которую могут щелкнуть пользователи.

Чтобы сделать изображение кликабельной кнопкой, укажите Image (не ImageComponent ) и задайте действие onClick .

Представление JSON
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string
}
Поля
text

string

Текст, отображаемый внутри кнопки.

icon

object ( Icon )

Изображение значка. Если заданы и icon , и text , вместо текста появляется значок.

Скоро появится поддержка как значка, так и текста.

color

object ( Color )

Если установлено, кнопка заполняется сплошным цветом фона, а цвет шрифта изменяется, чтобы поддерживать контраст с цветом фона. Например, установка синего фона, скорее всего, приведет к белому тексту.

Если не установлено, фон изображения будет белым, а цвет шрифта — синим.

Для красного, зеленого и синего значение каждого поля представляет собой число с float , которое может быть выражено одним из двух способов: как число от 0 до 255, деленное на 255 (153/255), или как значение от 0 до 1 ( 0,6). 0 представляет отсутствие цвета, а 1 или 255/255 представляют полное присутствие этого цвета на шкале RGB.

При желании установите альфа, которая устанавливает уровень прозрачности с помощью этого уравнения:

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

Для альфа значение 1 соответствует сплошному цвету, а значение 0 соответствует полностью прозрачному цвету.

Например, следующий цвет представляет полупрозрачный красный цвет:

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

object ( OnClick )

Действие, выполняемое при нажатии кнопки, например открытие гиперссылки или запуск пользовательской функции.

disabled

boolean

Если true , кнопка отображается в неактивном состоянии и не реагирует на действия пользователя.

altText

string

Альтернативный текст, используемый для доступности.

Установите описательный текст, который позволит пользователям узнать, что делает кнопка. Например, если кнопка открывает гиперссылку, вы можете написать: «Открывает новую вкладку браузера и переходит к документации разработчика Google Chat по адресу https://developers.google.com/chat» .

Не действует при установке значка; вместо этого используйте icon.alt_text .

Цвет

Представляет цвет в цветовом пространстве RGBA. Это представление предназначено для простоты преобразования в/из цветовых представлений на различных языках по сравнению с компактностью. Например, поля этого представления могут быть тривиально предоставлены конструктору java.awt.Color в Java; его также можно тривиально предоставить методу UIColor +colorWithRed:green:blue:alpha в iOS; и, немного поработав, его можно легко отформатировать в строку CSS rgba() в JavaScript.

Эта справочная страница не содержит информации об абсолютном цветовом пространстве, которое следует использовать для интерпретации значения RGB (например, sRGB, Adobe RGB, DCI-P3, BT.2020 и т. д.). По умолчанию приложения должны использовать цветовое пространство sRGB.

Когда необходимо определить равенство цветов, реализации, если не указано иное, рассматривают два цвета как равные, если все их значения красного, зеленого, синего и альфа различаются не более чем на 1e-5.

Пример (Ява):

 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();
 }
 // ...

Пример (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;
}
// ...

Пример (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('');
};

// ...
Представление JSON
{
  "red": number,
  "green": number,
  "blue": number,
  "alpha": number
}
Поля
red

number

Количество красного в цвете как значение в интервале [0, 1].

green

number

Количество зеленого цвета в виде значения в интервале [0, 1].

blue

number

Количество синего в цвете как значение в интервале [0, 1].

alpha

number

Доля этого цвета, которая должна быть применена к пикселю. То есть конечный цвет пикселя определяется уравнением:

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

Это означает, что значение 1,0 соответствует сплошному цвету, тогда как значение 0,0 соответствует полностью прозрачному цвету. При этом используется сообщение-оболочка, а не простой скаляр с плавающей запятой, чтобы можно было отличить значение по умолчанию от неустановленного значения. Если он опущен, этот цветовой объект отображается как сплошной цвет (как если бы альфа-значению было явно присвоено значение 1,0).

SwitchControl

Либо тумблер, либо флажок внутри виджета decoratedText .

Поддерживается только в виджете decoratedText .

В настоящее время поддерживается в диалогах . Поддержка карточных сообщений появится в ближайшее время.

Представление JSON
{
  "name": string,
  "value": string,
  "selected": boolean,
  "onChangeAction": {
    object (Action)
  },
  "controlType": enum (ControlType)
}
Поля
name

string

Имя, по которому виджет переключения идентифицируется в событии ввода формы.

Дополнительные сведения о работе с входными данными формы см. в разделе Получение данных формы .

value

string

Значение, введенное пользователем, возвращенное как часть события ввода формы.

Дополнительные сведения о работе с входными данными формы см. в разделе Получение данных формы .

selected

boolean

Когда true , переключатель выбран.

onChangeAction

object ( Action )

Действие, выполняемое при изменении состояния переключателя, например, какую функцию запускать.

controlType

enum ( ControlType )

Как переключатель отображается в пользовательском интерфейсе.

тип управления

Как переключатель отображается в пользовательском интерфейсе.

перечисления
SWITCH Тумблерный переключатель.
CHECKBOX Устарело в пользу CHECK_BOX .
CHECK_BOX Флажок.

Список кнопок

Список кнопок расположен горизонтально.

Представление JSON
{
  "buttons": [
    {
      object (Button)
    }
  ]
}
Поля
buttons[]

object ( Button )

Массив кнопок.

Ввод текста

Поле, в которое пользователи могут вводить текст. Поддерживает предложения и действия по изменению.

Приложения чата получают и могут обрабатывать значение введенного текста во время событий ввода формы. Дополнительные сведения о работе с входными данными формы см. в разделе Получение данных формы .

Когда вам нужно собрать абстрактные данные от пользователей, используйте текстовый ввод. Для сбора определенных данных от пользователей используйте вместо этого виджет ввода выбора.

Поддерживается только в диалогах . Поддержка карточных сообщений появится в ближайшее время.

Представление JSON
{
  "name": string,
  "label": string,
  "hintText": string,
  "value": string,
  "type": enum (Type),
  "onChangeAction": {
    object (Action)
  },
  "initialSuggestions": {
    object (Suggestions)
  },
  "autoCompleteAction": {
    object (Action)
  }
}
Поля
name

string

Имя, по которому ввод текста идентифицируется в событии ввода формы.

Дополнительные сведения о работе с входными данными формы см. в разделе Получение данных формы .

label

string

Текст, который отображается над полем ввода текста в пользовательском интерфейсе.

Укажите текст, который поможет пользователю ввести информацию, необходимую вашему приложению. Например, если вы спрашиваете чье-то имя, но конкретно вам нужна его фамилия, напишите «фамилия» вместо «имя».

Требуется, если hintText не указан. В противном случае опционально.

hintText

string

Текст, который появляется внутри поля ввода текста, предназначен для помощи пользователям, предлагая им ввести определенное значение. Этот текст не виден после того, как пользователи начнут печатать.

Требуется, если label не указана. В противном случае опционально.

value

string

Значение, введенное пользователем, возвращенное как часть события ввода формы.

Дополнительные сведения о работе с входными данными формы см. в разделе Получение данных формы .

type

enum ( Type )

Как поле ввода текста отображается в пользовательском интерфейсе. Например, является ли поле однострочным или многострочным.

onChangeAction

object ( Action )

Что делать при изменении поля ввода текста.

Примеры изменений включают добавление пользователем в поле или удаление текста.

Примеры действий, которые необходимо предпринять, включают запуск пользовательской функции или открытие диалогового окна в Google Chat.

initialSuggestions

object ( Suggestions )

Предлагаемые значения, которые могут вводить пользователи. Эти значения появляются, когда пользователи щелкают внутри поля ввода текста. По мере ввода пользователем предлагаемые значения динамически фильтруются в соответствии с введенным пользователем.

Например, поле ввода текста для языка программирования может предлагать Java, JavaScript, Python и C++. Когда пользователи начинают вводить «Jav», список предложений фильтруется так, чтобы отображались только Java и JavaScript.

Предлагаемые значения помогают пользователям вводить значения, понятные вашему приложению. Говоря о JavaScript, некоторые пользователи могут ввести «javascript», а другие — «javascript». Предложение «JavaScript» может стандартизировать взаимодействие пользователей с вашим приложением.

Когда указано, TextInput.type всегда SINGLE_LINE , даже если для него задано значение MULTIPLE_LINE .

autoCompleteAction

object ( Action )

По желанию. Укажите, какое действие следует предпринять, когда поле ввода текста предоставляет предложения пользователям, взаимодействующим с ним.

Если не указано, предложения устанавливаются с помощью initialSuggestions и обрабатываются клиентом.

Если указано, приложение выполняет указанное здесь действие, например запускает пользовательскую функцию.

Поддерживается надстройками Google Workspace, но не приложениями для чата. Поддержка приложений чата появится в ближайшее время.

Тип

Как поле ввода текста отображается в пользовательском интерфейсе. Например, является ли это однострочным полем ввода или многострочным вводом.

Если указано initialSuggestions , type всегда SINGLE_LINE , даже если для него задано значение MULTIPLE_LINE .

перечисления
SINGLE_LINE Поле ввода текста имеет фиксированную высоту в одну строку.
MULTIPLE_LINE Поле ввода текста имеет фиксированную высоту в несколько строк.

Предложения

Предлагаемые значения, которые могут вводить пользователи. Эти значения появляются, когда пользователи щелкают внутри поля ввода текста. По мере ввода пользователем предлагаемые значения динамически фильтруются в соответствии с введенным пользователем.

Например, поле ввода текста для языка программирования может предлагать Java, JavaScript, Python и C++. Когда пользователи начинают вводить «Jav», список предложений фильтруется так, чтобы отображались только Java и JavaScript.

Предлагаемые значения помогают пользователям вводить значения, понятные вашему приложению. Говоря о JavaScript, некоторые пользователи могут ввести «javascript», а другие — «javascript». Предложение «JavaScript» может стандартизировать взаимодействие пользователей с вашим приложением.

Когда указано, TextInput.type всегда SINGLE_LINE , даже если для него задано значение MULTIPLE_LINE .

Представление JSON
{
  "items": [
    {
      object (SuggestionItem)
    }
  ]
}
Поля
items[]

object ( SuggestionItem )

Список предложений, используемых для рекомендаций автозаполнения в полях ввода текста.

ПредложениеЭлемент

Одно предлагаемое значение, которое пользователи могут ввести в поле ввода текста.

Представление JSON
{
  "text": string
}
Поля
text

string

Значение предлагаемого ввода в поле ввода текста. Это эквивалентно тому, что пользователи вводят сами.

ВыборВвод

Виджет, который создает элемент пользовательского интерфейса с параметрами для выбора пользователями. Например, выпадающее меню или контрольный список.

Приложения чата получают и могут обрабатывать значение введенного текста во время событий ввода формы. Дополнительные сведения о работе с входными данными формы см. в разделе Получение данных формы .

Когда вам нужно собрать данные от пользователей, которые соответствуют заданным вами параметрам, используйте ввод выбора. Для сбора абстрактных данных от пользователей используйте вместо этого виджет ввода текста.

Поддерживается только в диалогах . Поддержка карточных сообщений появится в ближайшее время.

Представление JSON
{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  }
}
Поля
name

string

Имя, по которому ввод выбора идентифицируется в событии ввода формы.

Дополнительные сведения о работе с входными данными формы см. в разделе Получение данных формы .

label

string

Текст, который появляется над полем ввода выбора в пользовательском интерфейсе.

Укажите текст, который поможет пользователю ввести информацию, необходимую вашему приложению. Например, если пользователи выбирают срочность рабочей заявки из раскрывающегося меню, метка может быть «Срочная» или «Выбрать срочность».

type

enum ( SelectionType )

То, как параметр отображается для пользователей. Разные варианты поддерживают разные типы взаимодействий. Например, пользователи могут установить несколько флажков, но могут выбрать только одно значение из раскрывающегося меню.

Каждый вход выбора поддерживает один тип выбора. Совмещение флажков и переключателей, например, не поддерживается.

items[]

object ( SelectionItem )

Массив выбранных элементов. Например, все выбранные флажки.

onChangeAction

object ( Action )

Если указано, форма отправляется при изменении выбора. Если не указано, необходимо указать отдельную кнопку отправки формы.

Дополнительные сведения о работе с входными данными формы см. в разделе Получение данных формы .

Тип Выбора

То, как параметр отображается для пользователей. Разные варианты поддерживают разные типы взаимодействий. Например, пользователи могут установить несколько флажков, но могут выбрать только одно значение из раскрывающегося меню.

Каждый вход выбора поддерживает один тип выбора. Совмещение флажков и переключателей, например, не поддерживается.

В настоящее время поддерживается в диалогах . Поддержка карточных сообщений появится в ближайшее время.

перечисления
CHECK_BOX

Набор флажков. Пользователи могут устанавливать несколько флажков для каждого ввода выбора.

В настоящее время поддерживается в диалогах . Поддержка карточных сообщений появится в ближайшее время.

RADIO_BUTTON

Набор радиокнопок. Пользователи могут выбрать один переключатель для каждого входа выбора.

В настоящее время поддерживается в диалогах . Поддержка карточных сообщений появится в ближайшее время.

SWITCH

Набор переключателей. Пользователи могут включать несколько переключателей одновременно для каждого входа выбора.

В настоящее время поддерживается в диалогах . Поддержка карточных сообщений появится в ближайшее время.

DROPDOWN

Выпадающее меню. Пользователи могут выбрать один элемент раскрывающегося меню для каждого ввода выбора.

В настоящее время поддерживается в диалогах . Поддержка карточных сообщений появится в ближайшее время.

SelectionItem

Выбираемый элемент на входе выбора, например флажок или переключатель.

Представление JSON
{
  "text": string,
  "value": string,
  "selected": boolean
}
Поля
text

string

Текст, отображаемый пользователям.

value

string

Значение, связанное с этим элементом. Клиент должен использовать это как входное значение формы.

Дополнительные сведения о работе с входными данными формы см. в разделе Получение данных формы .

selected

boolean

Когда true , выбрано более одного элемента. Если для радиокнопок и раскрывающихся меню выбрано более одного элемента, принимается первый выбранный элемент, а последующие игнорируются.

ДатаВремяПикер

Позволяет пользователям указать дату, время или и дату, и время одновременно.

Принимает ввод текста от пользователей, но имеет интерактивный переключатель даты и времени, который помогает пользователям вводить дату и время в правильном формате. Если пользователи вводят дату или время неправильно, виджет показывает ошибку, которая предлагает пользователям ввести правильный формат.

Не поддерживается приложениями для чата. Поддержка приложений чата появится в ближайшее время.

Представление JSON
{
  "name": string,
  "label": string,
  "type": enum (DateTimePickerType),
  "valueMsEpoch": string,
  "timezoneOffsetDate": integer,
  "onChangeAction": {
    object (Action)
  }
}
Поля
name

string

Имя, по которому средство выбора даты и времени идентифицируется в событии ввода формы.

Дополнительные сведения о работе с входными данными формы см. в разделе Получение данных формы .

label

string

Текст, предлагающий пользователям ввести дату, время или дату и время.

Укажите текст, который поможет пользователю ввести информацию, необходимую вашему приложению. Например, если пользователи назначают встречу, то метка вроде «Дата встречи» или «Дата и время встречи» может подойти.

type

enum ( DateTimePickerType )

Какой ввод даты и времени поддерживает средство выбора даты и времени.

valueMsEpoch

string ( int64 format)

Значение, отображаемое как значение по умолчанию перед вводом пользователя или предыдущим вводом пользователя, представленное в миллисекундах ( время эпохи ).

Для типа DATE_AND_TIME используется полное значение эпохи.

Для типа DATE_ONLY используется только дата эпохи.

Для типа TIME_ONLY используется только время эпохи. Например, чтобы представить 3:00 утра, установите время эпохи 3 * 60 * 60 * 1000 .

timezoneOffsetDate

integer

Число, представляющее смещение часового пояса от UTC в минутах. Если установлено, valueMsEpoch отображается в указанном часовом поясе. Если не задано, используется настройка часового пояса пользователя на стороне клиента.

onChangeAction

object ( Action )

Запускается, когда пользователь нажимает « Сохранить» или « Очистить » в интерфейсе средства выбора даты и времени.

DateTimePickerType

Какой ввод даты и времени поддерживает средство выбора даты и времени.

перечисления
DATE_AND_TIME Пользователь может выбрать дату и время.
DATE_ONLY Пользователь может только выбрать дату.
TIME_ONLY Пользователь может только выбрать время.

Делитель

Отображает разделитель между виджетами, горизонтальную линию.

Например, следующий JSON создает разделитель:

"divider": {
}

Сетка

Отображает сетку с набором элементов.

Сетка поддерживает любое количество столбцов и элементов. Количество строк определяется элементами, разделенными столбцами. Сетка с 10 элементами и 2 столбцами имеет 5 строк. Сетка с 11 элементами и 2 столбцами имеет 6 строк.

В настоящее время поддерживается в диалогах . Поддержка карточных сообщений появится в ближайшее время.

Например, следующий JSON создает сетку из двух столбцов с одним элементом:

"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"
    }
  }
}
Представление JSON
{
  "title": string,
  "items": [
    {
      object (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
Поля
title

string

Текст, отображаемый в заголовке сетки.

items[]

object ( GridItem )

Элементы для отображения в сетке.

borderStyle

object ( BorderStyle )

Стиль границы, применяемый к каждому элементу сетки.

columnCount

integer

Количество столбцов для отображения в сетке. Значение по умолчанию используется, если это поле не указано, и это значение по умолчанию отличается в зависимости от того, где отображается сетка (диалоговое окно или сопутствующий).

onClick

object ( OnClick )

Этот обратный вызов повторно используется каждым отдельным элементом сетки, но с идентификатором и индексом элемента в списке элементов, добавленных к параметрам обратного вызова.

GridItem

Представляет один элемент в макете сетки.

Представление JSON
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
Поля
id

string

Указанный пользователем идентификатор для этого элемента сетки. Этот идентификатор возвращается в параметрах обратного вызова onClick родительской сетки.

image

object ( ImageComponent )

Изображение, отображаемое в элементе сетки.

title

string

Название элемента сетки.

subtitle

string

Подзаголовок элемента сетки.

layout

enum ( GridItemLayout )

Макет, используемый для элемента сетки.

ImageComponent

Представляет изображение.

Представление JSON
{
  "imageUri": string,
  "altText": string,
  "cropStyle": {
    object (ImageCropStyle)
  },
  "borderStyle": {
    object (BorderStyle)
  }
}
Поля
imageUri

string

URL-адрес изображения.

altText

string

Метка доступности для изображения.

cropStyle

object ( ImageCropStyle )

Стиль обрезки, применяемый к изображению.

borderStyle

object ( BorderStyle )

Стиль границы, применяемый к изображению.

ImageCropStyle

Представляет стиль кадрирования, примененный к изображению.

Например, вот как применить соотношение сторон 16 на 9:

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
Представление JSON
{
  "type": enum (ImageCropType),
  "aspectRatio": number
}
Поля
type

enum ( ImageCropType )

Тип урожая.

aspectRatio

number

Соотношение сторон для использования, если тип обрезки RECTANGLE_CUSTOM .

Например, вот как применить соотношение сторон 16 на 9:

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

ImageCropType

Представляет стиль кадрирования, примененный к изображению.

перечисления
IMAGE_CROP_TYPE_UNSPECIFIED Значение не указано. Не используй.
SQUARE Значение по умолчанию. Применяет квадратную обрезку.
CIRCLE Применяет круговую обрезку.
RECTANGLE_CUSTOM Применяет прямоугольную обрезку с пользовательским соотношением сторон. Установите пользовательское соотношение сторон с помощью aspectRatio .
RECTANGLE_4_3 Применяет прямоугольную обрезку с соотношением сторон 4:3.

ГраницаСтиль

Представляет полный стиль границы, применяемый к элементам в виджете.

Представление JSON
{
  "type": enum (BorderType),
  "strokeColor": {
    object (Color)
  },
  "cornerRadius": integer
}
Поля
type

enum ( BorderType )

Тип границы.

strokeColor

object ( Color )

Цвета для использования, когда тип BORDER_TYPE_STROKE .

cornerRadius

integer

Угловой радиус границы.

Тип границы

Представляет типы границ, применяемые к виджетам.

перечисления
BORDER_TYPE_UNSPECIFIED Значение не указано.
NO_BORDER Значение по умолчанию. Без границ.
STROKE Контур.

GridItemLayout

Представляет различные параметры макета, доступные для элемента сетки.

перечисления
GRID_ITEM_LAYOUT_UNSPECIFIED Макет не указан.
TEXT_BELOW Заголовок и подзаголовок отображаются под изображением элемента сетки.
TEXT_ABOVE Заголовок и подзаголовок отображаются над изображением элемента сетки.

CardAction

Действие карты — это действие, связанное с картой. Например, карточка счета может включать такие действия, как удаление счета, отправка счета по электронной почте или открытие счета в браузере.

Не поддерживается приложениями для чата.

Представление JSON
{
  "actionLabel": string,
  "onClick": {
    object (OnClick)
  }
}
Поля
actionLabel

string

Метка, которая отображается как элемент меню действий.

onClick

object ( OnClick )

Действие onClick для этого элемента действия.

CardFixedFooter

Постоянный (липкий) нижний колонтитул, который появляется внизу карточки.

Установка fixedFooter без указания primaryButton или secondaryButton вызывает ошибку.

Приложения для чата поддерживают fixedFooter в диалогах , но не в сообщениях-карточках .

Представление JSON
{
  "primaryButton": {
    object (Button)
  },
  "secondaryButton": {
    object (Button)
  }
}
Поля
primaryButton

object ( Button )

Основная кнопка фиксированного футера. Кнопка должна быть текстовой с набором текста и цвета.

secondaryButton

object ( Button )

Второстепенная кнопка фиксированного нижнего колонтитула. The button must be a text button with text and color set. primaryButton must be set if secondaryButton is set.

DisplayStyle

In Google Workspace Add-ons, determines how a card is displayed.

Not supported by Chat apps.

Enums
DISPLAY_STYLE_UNSPECIFIED Do not use.
PEEK The header of the card appears at the bottom of the sidebar, partially covering the current top card of the stack. Clicking the header pops the card into the card stack. If the card has no header, a generated header is used instead.
REPLACE Default value. The card is shown by replacing the view of the top card in the card stack.