Карточки (card)

Обновлено 19 июня 2024

Карточка card — элемент интерфейса из массива items сообщения ANSWER_TO_USER.

card

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

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

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

gallery_card
list_card

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

Карточки передаются в объектах card.

Наличие пустого поля text в элементах карточки приведет к ее неисправности.

gallery_card

Карточки для отображения в галерее.

Пример
Описание

	object (paddings) Параметры отступов
can_be_disabled	boolean Default: false Указывает, что карточка может отображаться как неактивная
type required	string Тип карточки Value: "gallery_card"
required	Array of media_gallery_item (object) or gallery_more_button_item (object) non-empty [ items ] Объекты с описанием ячеек карточки. В массиве должна быть минимум одна ячейка

{"paddings": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"can_be_disabled": false,
"type": "gallery_card",
"items": [{"type": "media_gallery_item",
"image": {"url": "https://example.ru/storage31/contents/8/e/010ea0147875e28b91ef1ff01cd042.jpg",
"hash": "string",
"placeholder": "string",
"scale_mode": "scale_aspect_fill",
"height": 192,
"placeholder_color": "solid_black",
"actions": [{ }
],
"size": {"width": "medium",
"aspect_ratio": 1.42
}
},
"top_text": {"text": "Пример текста",
"typeface": "footnote1",
"text_color": "default",
"margins": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"max_lines": 2,
"actions": [{ }
]
},
"bottom_text": {"text": "Пример текста",
"typeface": "footnote1",
"text_color": "default",
"margins": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"max_lines": 2,
"actions": [{ }
]
},
"icon": {"address": {"type": "url",
"url": "https://cdn.sberdevices.ru/VA/icons/first_session/balance.png"
},
"size": {"width": "xlarge",
"height": "xlarge"
},
"margins": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
}
},
"paddings": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"actions": [{"type": "text",
"text": "Текст",
"should_send_to_backend": true
}
]
}
]
}

	object (paddings) Параметры отступов
can_be_disabled	boolean Default: false Указывает, что карточка может отображаться как неактивная
type required	string Тип карточки Value: "gallery_card"
required	Array of media_gallery_item (object) or gallery_more_button_item (object) non-empty [ items ] Объекты с описанием ячеек карточки. В массиве должна быть минимум одна ячейка

{"paddings": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"can_be_disabled": false,
"type": "gallery_card",
"items": [{"type": "media_gallery_item",
"image": {"url": "https://example.ru/storage31/contents/8/e/010ea0147875e28b91ef1ff01cd042.jpg",
"hash": "string",
"placeholder": "string",
"scale_mode": "scale_aspect_fill",
"height": 192,
"placeholder_color": "solid_black",
"actions": [{ }
],
"size": {"width": "medium",
"aspect_ratio": 1.42
}
},
"top_text": {"text": "Пример текста",
"typeface": "footnote1",
"text_color": "default",
"margins": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"max_lines": 2,
"actions": [{ }
]
},
"bottom_text": {"text": "Пример текста",
"typeface": "footnote1",
"text_color": "default",
"margins": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"max_lines": 2,
"actions": [{ }
]
},
"icon": {"address": {"type": "url",
"url": "https://cdn.sberdevices.ru/VA/icons/first_session/balance.png"
},
"size": {"width": "xlarge",
"height": "xlarge"
},
"margins": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
}
},
"paddings": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"actions": [{"type": "text",
"text": "Текст",
"should_send_to_backend": true
}
]
}
]
}

Пример отображения карточки в портретной ориентации:

Галерея в вертикальной ориентации экрана

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

Галерея в горизонтальной ориентации экрана

list_card

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

Пример
Описание

	object (paddings) Параметры отступов
can_be_disabled	boolean Default: false Указывает, что карточка может отображаться как неактивная
type required	string Тип карточки Value: "list_card"
	Array of left_right_cell_view (object) or text_cell_view (object) or button_cell_view (object) or image_cell_view (object) or details_cell_view (object) or weather_cell_view (object)[ items ] Массив ячеек карточки

{"paddings": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"can_be_disabled": false,
"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": "xlarge",
"height": "xlarge"
},
"margins": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
}
},
"icon_vertical_gravity": "top",
"texts": {"title": {"text": "Пример текста",
"typeface": "footnote1",
"text_color": "default",
"margins": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"max_lines": 2,
"actions": [{ }
]
}
}
},
"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",
"top": "16x",
"right": "4x",
"bottom": "16x"
}
}
}
},
"actions": [{ }
]
}
]
}

	object (paddings) Параметры отступов
can_be_disabled	boolean Default: false Указывает, что карточка может отображаться как неактивная
type required	string Тип карточки Value: "list_card"
	Array of left_right_cell_view (object) or text_cell_view (object) or button_cell_view (object) or image_cell_view (object) or details_cell_view (object) or weather_cell_view (object)[ items ] Массив ячеек карточки

{"paddings": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"can_be_disabled": false,
"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": "xlarge",
"height": "xlarge"
},
"margins": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
}
},
"icon_vertical_gravity": "top",
"texts": {"title": {"text": "Пример текста",
"typeface": "footnote1",
"text_color": "default",
"margins": {"left": "8x",
"top": "16x",
"right": "4x",
"bottom": "16x"
},
"max_lines": 2,
"actions": [{ }
]
}
}
},
"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",
"top": "16x",
"right": "4x",
"bottom": "16x"
}
}
}
},
"actions": [{ }
]
}
]
}

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

Карточка в чате
Код

Карточка с ячейками типа `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": "Вы нажали на карточку"
                    }
                ]
            }
        ]
    }
}

Карточки (card)

card﻿

gallery_card﻿

list_card﻿

card

gallery_card

list_card