Элементы интерфейса смартапов

Элементы интерфейса из массива items сообщения ANSWER_TO_USER.

Смартапы могут передавать ассистенту следующие элементы интерфейса:

bubble — текст;
card — карточка.

Ассистент отображает элементы интерфейса в порядке, в котором они расположены в массиве items.

bubble

Пример:

{
    "bubble": {
        "text": "*Привет всем*",
        "markdown": true,
        "expand_policy": "auto_expand"
    }
}

Текст передается в объекте bubble, который может содержать следующие поля:

Поле Описание

Поле	Описание
`text`	`string` Текст, который отобразит ассистент. Максимальная длина: не более 250 символов.
`markdown`	`bool` Указывает, что текст содержит маркдаун-разметку, которую необходимо обработать. Если поле отсутствует, применяется значение `false` и текст отображается в исходном виде.
`expand_policy`	`string` Поведение шторки ассистента. Параметр актуален при работе с ассистентом на наших устройствах. Возможные значения: `auto_expand` — шторка будет автоматически разворачиваться, если полученный текст не помещается в свёрнутой шторке; `force_expand` — шторка развернётся независимо от того, помещается полученный текст в свёрнутой шторке или нет; `preserve_panel_state` — сохраняет текущее состояние шторки независимо от длины текста. По умолчанию `auto_expand`.

text

string

Текст, который отобразит ассистент.

Максимальная длина: не более 250 символов.

markdown

bool

Указывает, что текст содержит маркдаун-разметку, которую необходимо обработать.

Если поле отсутствует, применяется значение false и текст отображается в исходном виде.

expand_policy

string

Поведение шторки ассистента. Параметр актуален при работе с ассистентом на наших устройствах.

Возможные значения:

auto_expand — шторка будет автоматически разворачиваться, если полученный текст не помещается в свёрнутой шторке;
force_expand — шторка развернётся независимо от того, помещается полученный текст в свёрнутой шторке или нет;
preserve_panel_state — сохраняет текущее состояние шторки независимо от длины текста.

По умолчанию auto_expand.

card

Карточки помогают смартапам организовать сложную информацию на экране ассистента. Внешний вид карточек отличается в зависимости от типа смартапа (Chat App или Canvas App), а также в зависимости от типа поверхности (SberBox, SberPortal или приложение Салют).

note

Карточки недоступны в проектах SmartBot.

Карточки бывают следующих типов:

Ниже приводятся JSON-схемы карточек с примерами.

Карточки передаются в объектах card. Следующие поля присутствуют в карточках любого типа:

Поле Описание

Поле	Описание
`paddings`	`object` Описание отступов карточки.
`can_be_disabled`	`boolean` Указывает что карточка может отображаться как отключённая. По умолчанию `false`.
`type` Обязательное	`string` Тип карточки, который определяет наличие различных полей в объекте `card`. Возможные значения: `gallery_card` — горизонтальная галерея; `list_card` — карточка со списком ячеек.

paddings

object

Описание отступов карточки.

can_be_disabled

boolean

Указывает что карточка может отображаться как отключённая. По умолчанию false.

type

Обязательное

string

Тип карточки, который определяет наличие различных полей в объекте card.

Возможные значения:

gallery_card — горизонтальная галерея;
list_card — карточка со списком ячеек.

`gallery_card`gallery_card

Горизонтальная галерея.

Пример отображения вертикальной галереи:

Пример отображения горизонтальной галереи:

{
    "card": {
        "type": "gallery_card",
        "items": [
            {
                "type": "media_gallery_item",
                "image": {
                    "url": "https://thumbs.dfs.ivi.ru/storage31/contents/8/e/010ea0147875e28b91ef1ff01cd042.jpg",
                    "size": {
                        "width": "medium",
                        "aspect_ratio": 1.42
                    }
                },
                "margins": {
                    "top": "4x",
                    "left": "6x",
                    "right": "6x",
                    "bottom": "5x"
                },
                "bottom_text": {
                    "text": "2019 г. ‧ Комедия/Драма",
                    "typeface": "caption",
                    "text_color": "secondary",
                    "max_lines": 1,
                    "margins": {
                        "top": "2x"
                    }
                },
                "top_text": {
                    "text": "Однажды в Голливуде",
                    "typeface": "footnote1",
                    "text_color": "default",
                    "max_lines": 2
                }
            }
        ]
    }
}

Поле		Описание
`items` Обязательное		`array of objects` Ячейки карточки. Минимум 1 ячейка.
	`type` Обязательное	`string` Тип ячейки. Возможное значение: `media_gallery_item` — элемент галереи состоящий из изображения и двух текстовых полей. `gallery_more_button_item` — Кнопка Все результаты в карточке галереи.
	`image`	`object` Параметры изображения. Поле обязательно для ячеек с типом `media_gallery_item`.
	`top_text`	`object` Параметры текста над изображением.
	`bottom_text`	`object` Параметры текста под изображением или под кнопкой Все результаты. Поле обязательно для ячеек с типом `gallery_more_button_item`.
	`icon`	`object` Иконка кнопки. Поле обязательно для ячеек с типом `gallery_more_button_item`.
	`paddings`	`object` Отступы.
	`actions`	`array of objects` Массив объектов, описывающих действия. Поле обязательно для ячеек с типом `gallery_more_button_item`.

`list_card`list_card

Карточки с вертикальным списком ячеек.

{
    "card": {
        "type": "list_card",
        "cells": [
            {
                "type": "text_cell_view",
                "content": {
                    "text": "200 гонконгских долларов 🇭🇰",
                    "typeface": "headline3",
                    "text_color": "default",
                    "max_lines": 0
                },
                "paddings": {
                    "left": "8x",
                    "top": "10x",
                    "right": "8x"
                }
            },
            {
                "type": "text_cell_view",
                "content": {
                    "text": "1 663 ₽",
                    "typeface": "headline1",
                    "text_color": "default",
                    "max_lines": 0
                },
                "paddings": {
                    "left": "8x",
                    "top": "9x",
                    "right": "8x"
                }
            },
            {
                "type": "text_cell_view",
                "content": {
                    "text": "При покупке от 500 до 1 000 HKD\n100 HKD = 6,36 RUB\nСберБанк Онлайн сейчас",
                    "typeface": "footnote1",
                    "text_color": "secondary",
                    "max_lines": 0
                },
                "paddings": {
                    "left": "8x",
                    "top": "10x",
                    "right": "8x"
                }
            },
            {
                "type": "button_cell_view",
                "content": {
                    "text": "Купить",
                    "typeface": "button1",
                    "style": "default",
                    "type": "accept",
                    "actions": [
                        {
                            "type": "text",
                            "text": "Купить"
                        }
                    ],
                    "margins": {
                        "left": "10x",
                        "top": "5x",
                        "right": "10x",
                        "bottom": "5x"
                    }
                },
                "paddings": {
                    "left": "6x",
                    "top": "12x",
                    "right": "6x",
                    "bottom": "8x"
                }
            }
        ]
    }
}

Пример карточки с ячейками типа left_right_cell_view.

{
    "card": {
        "type": "list_card",
        "cells": [
            {
                "type": "left_right_cell_view",
                "paddings": {
                    "left": "8x",
                    "top": "16x",
                    "right": "4x",
                    "bottom": "16x"
                },
                "left": {
                    "type": "simple_left_view",
                    "icon": {
                        "address": {
                            "type": "url",
                            "url": "https://cdn.sberdevices.ru/VA/icons/first_session/balance.png"
                        },
                        "size": {
                            "width": "medium",
                            "height": "medium"
                        },
                        "margins": {
                            "right": "6x"
                        }
                    },
                    "icon_vertical_gravity": "top",
                    "texts": {
                        "title": {
                            "text": "Покажи баланс моей карты",
                            "typeface": "headline2",
                            "text_color": "default",
                            "max_lines": 0
                        }
                    }
                },
                "right": {
                    "type": "detail_right_view",
                    "info_and_icon": {
                        "icon": {
                            "address": {
                                "type": "url",
                                "url": "https://cdn.sberdevices.ru/VA/icons/first_session/balance.png"
                            },
                            "size": {
                                "width": "xlarge",
                                "height": "xlarge"
                            },
                            "margins": {
                                "left": "8x",
                                "right": "12x"
                            }
                        }
                    }
                },
                "actions": [
                    {
                        "type": "text",
                        "text": "Вы нажали на карточку"
                    }
                ]
            }
        ]
    }
}

Поле		Описание
`cells` Обязательное		`array of objects` Список ячеек карточки.
	`type` Обязательное	`string` Тип ячейки, от которого зависит её наполнение. Возможное значение: `left_right_cell_view`; `text_cell_view`; `button_cell_view`; `image_cell_view`; `details_cell_view`; `weather_cell_view`.
	`left`	`object` Левый элемент ячейки. Содержит обязательное поле `type` — тип левого элемента ячейки, который определяет содержимое ячейки. Обязательное поле. Возможные значения: `simple_left_view` `fast_answer_left_view` — вертикальный упорядоченный список Для `type = simple_left_view` дополнительно передаются следующие поля: `icon` `texts` `icon_vertical_gravity` Для `type = fast_answer_left_view` дополнительно передаются следующие поля: `label` `margins` `icon_and_value` — объект, который описывает горизонтальный упорядоченный список, содержащий поля `icon` и `value` (обязательное)
	`right`	`object` Правый элемент ячейки. Содержит следующие поля: `type` — тип элемента. Тип `string`. Обязательное поле. Возможные значения: `disclosure_right_view` (правая угловая скобка) и `detail_right_view`. `margins` — отступы элемента. Если элемент ячейки задан как `detail_right_view`, поля объекта будут аналогичны полям объектов массива `details` (см. ниже).
	`paddings`	`object` Описание отступов ячеек.
	`content` Обязательное	`object` Содержимое ячейки, которое зависит от её типа: `text_cell_view` — текст ячейки. `button_cell_view` — кнопки ячейки. `image_cell_view` — изображение, которое отображается в ячейке. `weather_cell_view` — массив объектов, описывающих погодные данные. Поле присутствует только в приведённых в списке ячейках.
	`divider`	`object` Разделитель — тонкая полоска, разделяющая ячейки. Применяется только в ячейках типа `left_right_cell_view`. Содержит следующие поля: `style` — Стиль разделителя. Обязательное поле. Тип `string`. Возможные значения `default` и `read_only`. `size` — Размеры разделителя. Обязательное поле. Тип `string`. Возможные значения: `d1` `d2` `d3` `d4` `d5`
	`actions`	`array of objects` Массив объектов, описывающих действия. Применяется только в ячейках типа `left_right_cell_view`.
	`details` Обязательное	`array of objects` Поле актуально только для ячеек с типом `details_cell_view`. Содержит массив объектов, каждый из которых описывает вертикальный упорядоченный блок. Минимальное количество элементов в массиве — 1. Объекты массива содержат следующие поля: `type` — тип правого элемента ячейки. `detail` — текстовый элемент. `info_and_icon` — горизонтальный упорядоченный блок, который содержит поля `info`, `icon` и `margins`. `margins` — поля ячейки. `vertical_gravity` — вертикальное притяжение ячейки. Тип `string`. Возможные значения: `top`, `center`, `bottom` `detail_position` — расположение объекта `detail` относительно `info_and_icon`. Тип `string`. Возможные значения `top` (по умолчанию) и `bottom`.

Параметры карточек

Текст

Поле Описание

Поле	Описание
`text` Обязательное	`string` Текст, который необходимо отобразить. Минимальная длина текста 1 символ.
`typeface` Обязательное	`string` Стиль текста. Посмотреть примеры отображения стилей можно в документации дизайн-системы Plasma. Возможные значения: `headline1`; `headline2`; `headline3`; `title1`; `title2`; `body1`; `body2`; `body3`; `text1`; `paragraphText1`; `paragraphText2`; `footnote1`; `footnote2`; `button1`; `button2`; `caption`.
`text_color` Обязательное	`string` Цвет текста. Возможные значения: `default`; `secondary`; `tertiary`; `inverse`; `brand`; `warning`; `critical`; `link`.
`margins`	`object` Отступы.
`max_lines`	`integer` Максимальное количество строк. По умолчанию 1. Значение 0 указывает на неограниченное количество строк.
`actions`	`array of objects` Массив объектов, описывающих действия.

text

Обязательное

string

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

typeface

Обязательное

string

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

Возможные значения:

headline1;
headline2;
headline3;
title1;
title2;
body1;
body2;
body3;
text1;
paragraphText1;
paragraphText2;
footnote1;
footnote2;
button1;
button2;
caption.

text_color

Обязательное

string

Цвет текста.

Возможные значения:

default;
secondary;
tertiary;
inverse;
brand;
warning;
critical;
link.

margins

object

Отступы.

max_lines

integer

Максимальное количество строк. По умолчанию 1.

Значение 0 указывает на неограниченное количество строк.

actions

array of objects

Массив объектов, описывающих действия.

Отступы

Поле	Описание
`left`	`string` Размер отступа. Возможные значения: `0x`; `1x`; `2x`; `4x`; `5x`; `6x`; `8x`; `9x`; `10x`; `12x`; `16x`. Значение по умолчанию `0x`.
`top`	`string` Размер отступа. Возможные значения: `0x`; `1x`; `2x`; `4x`; `5x`; `6x`; `8x`; `9x`; `10x`; `12x`; `16x`. Значение по умолчанию `0x`.
`right`	`string` Размер отступа. Возможные значения: `0x`; `1x`; `2x`; `4x`; `5x`; `6x`; `8x`; `9x`; `10x`; `12x`; `16x`. Значение по умолчанию `0x`.
`bottom`	`string` Размер отступа. Возможные значения: `0x`; `1x`; `2x`; `4x`; `5x`; `6x`; `8x`; `9x`; `10x`; `12x`; `16x`. Значение по умолчанию `0x`.

Изображение

Поле Описание

Поле	Описание
`url` Обязательное	`string` Адрес изображения.
`hash`	`string` Хэш изображения.
`placeholder`	`string` Заглушка, которая отображается, если изображения нет или оно невалидно.
`scale_mode`	`string` Режим растягивания содержимого. Возможные значения: `scale_aspect_fill`; `scale_aspect_fit`; `center`; `top`; `bottom`; `left`; `right`; `top_left`; `top_right`; `bottom_left`; `bottom_right`.
`height`	`integer` Высота контейнера изображения, выраженная в независящих от платформы единицах. Поле игнорируется, если присутствует поле `size`. По умолчанию 192.
`placeholder_color`	`string` Цвет фона. Возможные значения: `solid_black`; `solid_white`; `solid_transparent`; `solid_disabled`; `solid_brand`; `solid_warning`; `solid_critical`; `solid_action`; `liquid_60`; `liquid_50`; `liquid_40`; `liquid_30`; `liquid_20`; `liquid_10`.
`actions`	`array of objects` Массив объектов, описывающих действия.
`size`	`object` Размер изображения.
	`width` Обязательное	`string` Ширина содержимого в терминах сеток. Возможные значения: `small`; `medium`; `large`; `resizable`.
	`aspect_ratio` Обязательное	`number` Отношение высоты содержимого к ширине.

url

Обязательное

string

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

hash

string

Хэш изображения.

placeholder

string

Заглушка, которая отображается, если изображения нет или оно невалидно.

scale_mode

string

Режим растягивания содержимого.

Возможные значения:

scale_aspect_fill;
scale_aspect_fit;
center;
top;
bottom;
left;
right;
top_left;
top_right;
bottom_left;
bottom_right.

height

integer

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

Поле игнорируется, если присутствует поле size.

По умолчанию 192.

placeholder_color

string

Цвет фона.

Возможные значения:

solid_black;
solid_white;
solid_transparent;
solid_disabled;
solid_brand;
solid_warning;
solid_critical;
solid_action;
liquid_60;
liquid_50;
liquid_40;
liquid_30;
liquid_20;
liquid_10.

actions

array of objects

Массив объектов, описывающих действия.

size

object

Размер изображения.

width

Обязательное

string

Ширина содержимого в терминах сеток.

Возможные значения:

small;
medium;
large;
resizable.

aspect_ratio

Обязательное

number

Отношение высоты содержимого к ширине.

Погодные данные

Пример массива content ячейки weather_cell_view:

{
    "type": "weather_cell_view",
    "content": [
        {
            "weekday": "Понедельник",
            "date": "15 сентября",
            "day": "+5°",
            "night": "-5°",
            "icon": {
                "address": {
                    "type": "url",
                    "url": "https://example.ru/example.png"
                },
                "size": {
                    "width": "small",
                    "height": "small"
                }
            }
        },
        {
            "weekday": "Вторник",
            "date": "16 сентября",
            "day": "+23°",
            "night": "+12°",
            "icon": {
                "address": {
                    "type": "url",
                    "url": "https://example.ru/example.png"
                },
                "size": {
                    "width": "small",
                    "height": "small"
                }
            }
        }
    ],
    "paddings": {
        "top": "8x"
    }
}

Поле Описание

Поле	Описание
`weekday` Обязательное	`string` День недели
`date` Обязательное	`string` Дата
`day` Обязательное	`string` Погода днем
`night` Обязательное	`string` Погода ночью
`icon` Обязательное	`object` Параметры иконки
`address` Обязательное	`object` Путь к иконке
`size` Обязательное	`object` Размер иконки
`width` Обязательное	`string` Ширина иконки. Возможные значения: `xsmall` `small` `medium` `large` `xlarge`
`height` Обязательное	`string` Высота иконки. Возможные значения: `xsmall` `small` `medium` `large` `xlarge`

weekday

Обязательное

string

День недели

date

Обязательное

string

Дата

day

Обязательное

string

Погода днем

night

Обязательное

string

Погода ночью

icon

Обязательное

object

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

address

Обязательное

object

Путь к иконке

size

Обязательное

object

Размер иконки

width

Обязательное

string

Ширина иконки.
Возможные значения:

xsmall
small
medium
large
xlarge

height

Обязательное

string

Высота иконки.
Возможные значения:

xsmall
small
medium
large
xlarge

Кнопки в ячейках

Пример массива content ячейки button_cell_view:

{
    "type": "button_cell_view",
    "content": {
        "text": "Согласен",
        "typeface": "button1",
        "style": "default",
        "type": "accept",
        "actions": [
            {
                "type": "text",
                "text": "Согласен"
            }
        ],
        "margins": {
            "top": "4x",
            "bottom": "4x"
        }
    },
    "paddings": {
        "top": "9x"
    }
}

Поле Описание

Поле	Описание
`text` Обязательное	`string` Название кнопки
`typeface` Обязательное	`string` Стиль текста. Возможные значения: `headline1`; `headline2`; `headline3`; `title1`; `title2`; `body1`; `body2`; `body3`; `text1`; `paragraphText1`; `paragraphText2`; `footnote1`; `footnote2`; `button1`; `button2`; `caption`.
`style`	`string` Стиль кнопки. Возможные значения `default` и `transparent`. Значение по умолчанию — `transparent`
`type`	`string` Тип кнопки. Возможные значения: `accept`; `disabled`; `negative`. Значение по умолчанию `accept`
`actions` Обязательное	`array of objects` Массив объектов, описывающих действия.
`margins`	`object` Отступы.

text

Обязательное

string

Название кнопки

typeface

Обязательное

string

Стиль текста.

Возможные значения:

headline1;
headline2;
headline3;
title1;
title2;
body1;
body2;
body3;
text1;
paragraphText1;
paragraphText2;
footnote1;
footnote2;
button1;
button2;
caption.

style

string

Стиль кнопки. Возможные значения default и transparent. Значение по умолчанию — transparent

type

string

Тип кнопки. Возможные значения:

accept;
disabled;
negative.

Значение по умолчанию accept

actions

Обязательное

array of objects

Массив объектов, описывающих действия.

margins

object

Отступы.

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

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

Получение согласия пользователей

{
    "card": {
        "type": "list_card",
        "paddings": {
            "left": "9x",
            "top": "9x",
            "right": "9x",
            "bottom": "9x"
        },
        "cells": [
            {
                "type": "left_right_cell_view",
                "left": {
                    "type": "simple_left_view",
                    "texts": {
                        "title": {
                            "text": "Согласие на обработку персональных данных",
                            "typeface": "headline3",
                            "text_color": "default",
                            "max_lines": 0
                        },
                        "subtitle": {
                            "text": "Я соглашаюсь с условиями и подписываю Согласие на обработку персональных данных",
                            "typeface": "footnote1",
                            "text_color": "brand",
                            "max_lines": 0,
                            "margins": {
                                "top": "5x"
                            },
                            "actions": [
                                {
                                    "type": "deep_link",
                                    "deep_link": "https://sber.ru/salute/salute_consent_app.pdf"
                                }
                            ]
                        }
                    }
                }
            },
            {
                "type": "button_cell_view",
                "content": {
                    "text": "Согласен",
                    "typeface": "button1",
                    "style": "default",
                    "type": "accept",
                    "actions": [
                        {
                            "type": "text",
                            "text": "Согласен"
                        }
                    ],
                    "margins": {
                        "top": "4x",
                        "bottom": "4x"
                    }
                },
                "paddings": {
                    "top": "9x"
                }
            }
        ]
    }
}

Курсы драгоценных металлов

{
    "card": {
        "type": "list_card",
        "paddings": {
            "left": "8x",
            "right": "8x"
        },
        "cells": [
            {
                "type": "text_cell_view",
                "content": {
                    "text": "Золото, 1 г",
                    "typeface": "headline3",
                    "text_color": "default",
                    "max_lines": 0
                },
                "paddings": {
                    "top": "10x"
                }
            },
            {
                "type": "text_cell_view",
                "content": {
                    "text": "Купить",
                    "typeface": "body1",
                    "text_color": "secondary",
                    "max_lines": 0
                },
                "paddings": {
                    "top": "9x"
                }
            },
            {
                "type": "text_cell_view",
                "content": {
                    "text": "4 932,00 ₽",
                    "typeface": "headline1",
                    "text_color": "default",
                    "max_lines": 0
                },
                "paddings": {
                    "top": "2x"
                }
            },
            {
                "type": "text_cell_view",
                "content": {
                    "text": "Продать",
                    "typeface": "body1",
                    "text_color": "secondary",
                    "max_lines": 0
                },
                "paddings": {
                    "top": "8x"
                }
            },
            {
                "type": "text_cell_view",
                "content": {
                    "text": "4 542,00 ₽",
                    "typeface": "headline1",
                    "text_color": "default",
                    "max_lines": 0
                },
                "paddings": {
                    "top": "2x"
                }
            },
            {
                "type": "text_cell_view",
                "content": {
                    "text": "4 916,00 при покупке от 50 г\n4 558,00 при продаже от 50 г\nСберБанк Онлайн сейчас",
                    "typeface": "footnote1",
                    "text_color": "secondary",
                    "max_lines": 0
                },
                "paddings": {
                    "top": "10x",
                    "bottom": "8x"
                }
            }
        ]
    }
}

Подтверждение действия

{
    "card": {
        "type": "list_card",
        "paddings": {
            "bottom": "8x",
            "top": "8x"
        },
        "cells": [
            {
                "type": "left_right_cell_view",
                "paddings": {
                    "left": "8x",
                    "right": "8x",
                    "top": "6x",
                    "bottom": "6x"
                },
                "left": {
                    "type": "simple_left_view",
                    "icon": {
                        "address": {
                            "type": "local",
                            "identificator": "card"
                        },
                        "tint_color": "solid_brand",
                        "size": {
                            "width": "medium",
                            "height": "medium"
                        },
                        "margins": {
                            "right": "6x"
                        }
                    },
                    "icon_vertical_gravity": "center",
                    "texts": {
                        "title": {
                            "text": "Платежная система",
                            "typeface": "footnote1",
                            "text_color": "secondary",
                            "max_lines": 0
                        },
                        "subtitle": {
                            "text": "Visa",
                            "typeface": "body1",
                            "text_color": "default",
                            "margins": {
                                "top": "1x"
                            }
                        }
                    }
                },
                "right": {
                    "type": "detail_right_view",
                    "detail": {
                        "text": "Рубль",
                        "typeface": "body1",
                        "text_color": "default"
                    },
                    "vertical_gravity": "center"
                },
                "divider": {
                    "style": "default",
                    "size": "d5"
                }
            },
            {
                "type": "left_right_cell_view",
                "paddings": {
                    "top": "6x",
                    "bottom": "6x",
                    "left": "8x",
                    "right": "8x"
                },
                "left": {
                    "type": "simple_left_view",
                    "icon": {
                        "address": {
                            "type": "local",
                            "identificator": "bell"
                        },
                        "tint_color": "solid_brand",
                        "size": {
                            "width": "medium",
                            "height": "medium"
                        },
                        "margins": {
                            "right": "6x"
                        }
                    },
                    "icon_vertical_gravity": "center",
                    "texts": {
                        "title": {
                            "text": "Счет карты",
                            "typeface": "footnote1",
                            "text_color": "secondary",
                            "max_lines": 0
                        },
                        "subtitle": {
                            "text": "Открыть новый",
                            "typeface": "body1",
                            "text_color": "default",
                            "margins": {
                                "top": "1x"
                            }
                        }
                    }
                },
                "divider": {
                    "style": "default",
                    "size": "d5"
                }
            },
            {
                "type": "left_right_cell_view",
                "paddings": {
                    "top": "6x",
                    "bottom": "6x",
                    "left": "8x",
                    "right": "8x"
                },
                "left": {
                    "type": "simple_left_view",
                    "icon": {
                        "address": {
                            "type": "local",
                            "identificator": "bell"
                        },
                        "tint_color": "solid_brand",
                        "size": {
                            "width": "medium",
                            "height": "medium"
                        },
                        "margins": {
                            "right": "6x"
                        }
                    },
                    "icon_vertical_gravity": "center",
                    "texts": {
                        "title": {
                            "text": "Уведомления по карте",
                            "typeface": "footnote1",
                            "text_color": "secondary",
                            "max_lines": 0
                        },
                        "subtitle": {
                            "text": "Все списания и зачисления",
                            "typeface": "body1",
                            "text_color": "default",
                            "margins": {
                                "top": "1x"
                            }
                        },
                        "caption": {
                            "text": "Бесплатно или 60 ₽ в месяц",
                            "typeface": "footnote1",
                            "text_color": "secondary"
                        }
                    }
                },
                "divider": {
                    "style": "default",
                    "size": "d5"
                }
            },
            {
                "type": "left_right_cell_view",
                "paddings": {
                    "top": "6x",
                    "bottom": "6x",
                    "left": "8x",
                    "right": "8x"
                },
                "left": {
                    "type": "simple_left_view",
                    "icon": {
                        "address": {
                            "type": "local",
                            "identificator": "user"
                        },
                        "tint_color": "solid_brand",
                        "size": {
                            "width": "medium",
                            "height": "medium"
                        },
                        "margins": {
                            "right": "6x"
                        }
                    },
                    "icon_vertical_gravity": "center",
                    "texts": {
                        "title": {
                            "text": "Имя и фамилия на карте",
                            "typeface": "footnote1",
                            "text_color": "secondary",
                            "max_lines": 0
                        },
                        "subtitle": {
                            "text": "IVAN IVANOV",
                            "typeface": "body1",
                            "text_color": "default",
                            "margins": {
                                "top": "1x"
                            }
                        }
                    }
                }
            },
            {
                "type": "text_cell_view",
                "paddings": {
                    "top": "2x",
                    "bottom": "2x",
                    "left": "8x",
                    "right": "8x"
                },
                "content": {
                    "text": "Я соглашаюсь с условиями и подписываю документы по операции для получения дебетовой карты",
                    "max_lines": 0,
                    "typeface": "footnote1",
                    "text_color": "default"
                }
            },
            {
                "type": "button_cell_view",
                "content": {
                    "text": "Согласиться и подтвердить",
                    "typeface": "button1",
                    "style": "default",
                    "type": "accept",
                    "actions": [
                        {
                            "type": "text",
                            "text": "Согласился и подтвердил"
                        }
                    ],
                    "margins": {
                        "left": "10x",
                        "top": "5x",
                        "right": "10x",
                        "bottom": "5x"
                    }
                },
                "paddings": {
                    "top": "6x",
                    "left": "8x",
                    "right": "8x"
                }
            }
        ]
    }
}

Горизонтальная галерея результатов поиска

Данный пример работает только на устройствах.

{
    "card": {
        "type": "gallery_card",
        "items": [
            {
                "type": "gallery_search_content_item",
                "actions": [
                    {
                        "type": "deep_link",
                        "deep_link": "https://sport-marafon.ru/catalog/zimnyaya-obuv/"
                    }
                ],
                "width": "large",
                "image": {
                    "type": "url",
                    "url": "https://cs5-2.4pda.to/6380085.png"
                },
                "title_text": {
                    "text": "Теплая замняя обувь - магазин СПОРТ-МАРАФОН",
                    "typeface": "body2",
                    "text_color": "default",
                    "max_lines": 2
                },
                "link_text": {
                    "text": "sport-marafon.ru/catalog/zimnyaya-obuv",
                    "typeface": "footnote1",
                    "text_color": "brand",
                    "max_lines": 1,
                    "margins": {
                        "top": "2x",
                        "bottom": "2x"
                    }
                },
                "description_text": {
                    "text": "Времена валенок ушли, нынешний ассортимент зимней обуви куда богаче. Так что же предлагается в современных магазинах зимней обуви? Попробуем разобраться.",
                    "typeface": "footnote1",
                    "text_color": "secondary",
                    "max_lines": 4,
                    "margins": {
                        "top": "2x"
                    }
                },
                "paddings": {
                    "top": "10x",
                    "left": "8x",
                    "right": "8x",
                    "bottom": "10x"
                }
            },
            {
                "type": "gallery_search_content_item",
                "actions": [
                    {
                        "type": "deep_link",
                        "deep_link": "https://sport-marafon.ru/catalog/zimnyaya-obuv/"
                    }
                ],
                "width": "large",
                "title_text": {
                    "text": "СПОРТ-МАРАФОН",
                    "typeface": "body2",
                    "text_color": "default",
                    "max_lines": 2
                },
                "link_text": {
                    "text": "sport-marafon.ru/catalog/zimnyaya-obuv",
                    "typeface": "footnote1",
                    "text_color": "brand",
                    "max_lines": 1,
                    "margins": {
                        "top": "2x",
                        "bottom": "2x"
                    }
                },
                "description_text": {
                    "text": "Времена валенок ушли, нынешний ассортимент зимней обуви куда богаче. Так что же предлагается в современных магазинах зимней обуви? Попробуем разобраться.",
                    "typeface": "footnote1",
                    "text_color": "secondary",
                    "max_lines": 4,
                    "margins": {
                        "top": "2x"
                    }
                },
                "paddings": {
                    "top": "10x",
                    "left": "8x",
                    "right": "8x",
                    "bottom": "10x"
                }
            },
            {
                "type": "gallery_more_button_item",
                "bottom_text": {
                    "text": "Все результаты",
                    "typeface": "caption",
                    "text_color": "primary",
                    "max_lines": 1,
                    "margins": {
                        "top": "4x"
                    }
                },
                "icon": {
                    "tint_color": "solid_white",
                    "address": {
                        "type": "local",
                        "identificator": "ellipsis"
                    },
                    "size": {
                        "width": "small",
                        "height": "small"
                    }
                },
                "actions": [
                    {
                        "type": "deep_link",
                        "deep_link": "https://sport-marafon.ru/catalog/obuv/"
                    }
                ]
            }
        ],
        "bottom_text": {
            "text": "Результаты поиска bing",
            "typeface": "caption",
            "text_color": "secondary",
            "max_lines": 1,
            "margins": {
                "top": "6x",
                "left": "8x",
                "bottom": "6x",
                "right": "8x"
            }
        }
    }
}

Обновлено 20 апреля 2022

Заметили ошибку?

Выделите текст и нажмите Ctrl + Enter, чтобы сообщить нам о ней

Популярные

Популярные

Элементы интерфейса смартапов

bubble

card

note

`gallery_card`gallery_card

`list_card`list_card

Параметры карточек

Текст

Отступы

Изображение

Погодные данные

Кнопки в ячейках

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

Получение согласия пользователей

Курсы драгоценных металлов

Подтверждение действия

Горизонтальная галерея результатов поиска

Популярные

Популярные

Элементы интерфейса смартапов

bubble

card

note

gallery_cardgallery_card

list_cardlist_card

Параметры карточек

Текст

Отступы

Изображение

Погодные данные

Кнопки в ячейках

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

Получение согласия пользователей

Курсы драгоценных металлов

Подтверждение действия

Горизонтальная галерея результатов поиска

`gallery_card`gallery_card

`list_card`list_card