Создавайте карточки для приложений Google Chat

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

  • Сообщения , содержащие одну или несколько открыток.
  • «Домашние страницы» — это карточка, которая появляется на вкладке «Главная» в личных сообщениях в приложении «Чат».
  • Диалоговые окна — это карточки, которые открываются в новом окне из сообщений и с главных страниц сайтов.

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

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

Предварительные требования

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

Используйте конструктор карточек для разработки и предварительного просмотра сообщений и пользовательских интерфейсов для чат-приложений:

Откройте конструктор карточек.

Добавить заголовок

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

Ниже приведён пример элемента CardHeader :

Добавьте один или несколько разделов карточки.

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

Ниже приведён пример элемента CardSection , содержащего два виджета textParagraph :

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

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

Ниже представлена ​​карточка, состоящая из divider виджета, расположенного между другими типами виджетов:

Добавить столбцы

Виджет columns отображает до 2 столбцов в карточке. Вы можете добавлять виджеты в каждый столбец; виджеты отображаются в том порядке, в котором они указаны. Чтобы включить более 2 столбцов или использовать строки, используйте виджет grid .

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

В следующем примере показана карточка с виджетом « columns , содержащая 2 столбца текста. Чтобы просмотреть только расположение столбцов и свернуть пример кода, нажмите кнопку «Свернуть» . Когда пространство ограничено, как в следующем примере, второй столбец переносится под первый.

Задайте ширину столбца

Столбцы отображаются рядом друг с другом. Вы можете настроить ширину каждого столбца с помощью поля horizontalSizeStyle . Если ширина экрана пользователя слишком мала, второй столбец будет переноситься ниже первого:

  • В веб-браузере второй столбец переносится на следующую строку, если ширина экрана меньше или равна 480 пикселям.
  • На устройствах iOS второй столбец переносится на следующую строку, если ширина экрана меньше или равна 300 pt.
  • На устройствах Android второй столбец переносится на следующую строку, если ширина экрана меньше или равна 320 dp.

В следующем примере отображается карточка с виджетом columns , содержащая 2 столбца текста с 4 элементами в каждом. К каждому элементу в столбцах применяется свойство horizontalSizeStyle позволяющее регулировать размер текстового пространства в каждом столбце:

  • В первом абзаце текста используется FILL_MINIMUM_SPACE , который заполняет не более 30% ширины карточки.
  • Во втором абзаце текста используется FILL_AVAILABLE_SPACE для заполнения доступного пространства по ширине карточки. В этом примере она заполняет 70% ширины карточки.
  • В третьем абзаце текста параметр horizontalSizeStyle не определен, поэтому по умолчанию используется значение, заполняющее доступное пространство карточки.
  • В четвертом абзаце текста используется FILL_MINIMUM_SPACE , который заполняет не более 30% ширины карточки.

Определите горизонтальное выравнивание колонны.

Вы можете выравнивать виджеты по горизонтали слева, справа или по центру столбца, определив поле horizontalAligment . Если поле horizontalAlignment не определено, виджеты выравниваются по левому краю столбца.

В следующем примере текст в столбце выравнивается по левому краю по горизонтали:

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

В следующем примере текст в столбце выравнивается по правому краю по горизонтали:

Определите вертикальное выравнивание колонны.

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

В следующем примере текст в столбце выравнивается по вертикали по верхнему краю:

В следующем примере текст в центральной колонке выравнивается по вертикали:

В следующем примере текст в нижнем столбце выравнивается по вертикали:

Добавьте сетку для отображения коллекции элементов.

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

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

В следующем примере представлена ​​таблица из двух столбцов с одним элементом:

Чтобы определить местоположение текста рядом с изображением в сетке, можно указать поле gridItemLayout . Это поле позволяет определить, будет ли текст отображаться над или под элементом в сетке. Если gridItemLayout не определено, текст по умолчанию будет отображаться под элементом в сетке.

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

Добавьте рамку к сетке или столбцу.

Для элементов, отображаемых в column или grid , можно добавить границу, определив поля borderType и borderStyle . Если поле borderStyle не определено, по умолчанию граница отсутствует. Вы можете определить borderType , который будет применяться ко всем элементам в виджете, или применить стиль к каждому отдельному элементу в виджете.

В следующем примере представлена ​​таблица из двух столбцов, в каждом из которых находится изображение. Тип, стиль и цвет границы заданы таким образом, чтобы применяться ко всем элементам таблицы.

В следующем примере представлена ​​таблица из 3 столбцов, в каждом из которых находится изображение, а стиль и тип границы определены индивидуально. Для первого изображения граница задана как STROKE . Для второго изображения граница задана как NO_BORDER . Для третьего изображения граница не задана.

Добавить карусель

Виджет Carousel отображает набор объектов CarouselCard , которые можно прокручивать, добавляя и убирая элементы с экрана. К каждому CarouselCard можно добавить несколько виджетов.

Виджет CardFixedFooter отображает нижний колонтитул сообщения, отправленного приложением чата. Нижний колонтитул может включать основную и дополнительную кнопки.

Виджет CardFixedFooter доступен только для диалоговых окон .

Ниже приведён пример виджета CardFixedFooter с двумя кнопками:

Устранение неполадок

Когда приложение или карточка Google Chat выдает ошибку, интерфейс чата отображает сообщение «Что-то пошло не так» или «Не удалось обработать ваш запрос». Иногда интерфейс чата не отображает никаких сообщений об ошибке, но приложение или карточка чата выдает неожиданный результат; например, сообщение на карточке может не появиться.

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