Форматирование структуры карточки или диалога

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

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

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

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

  • Аккаунт Google Workspace с доступом к Google Chat .
  • Опубликованное приложение чата. Чтобы создать приложение Chat, следуйте этому краткому руководству .

    • Отображение карточек и диалогов в столбцах

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

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

    В следующем примере отображается карточка с виджетом columns , содержащим два столбца текста. Чтобы просмотреть только макет столбцов и свернуть пример кода, нажмите Collapse . Если пространство ограничено, как в следующем примере, второй столбец переносится под первый столбец.

    Определить ширину столбца

    Столбцы отображаются рядом. Вы можете настроить ширину каждого столбца с помощью поля 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 не определено, виджеты в столбце выравниваются по верху.

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

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

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

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

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

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

    Отображение сетки с коллекцией элементов

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

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

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

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

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

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

    Добавьте рамку к элементам пользовательского интерфейса

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

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

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

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

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

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