Коллекция изображений

Замечание

Вы создаете сценарии Copilot, Teams или Outlook с помощью адаптивных карточек? Посетите Документационный центр по Adaptive Card, новый единый ресурс для всех ваших потребностей в адаптивных картах! У него есть все ресурсы, которые вы ищете, включая полную документацию для многих новых функций, таких как адаптивный макет, значок, значок, карусель, диаграммы и многое другое!

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

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

Пример коллекции образов

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

Код JSON (без шаблонов)

JSON

{
	"type": "AdaptiveCard",
	"body": [
		{
			"type": "TextBlock",
			"text": "The latest from Bing",
			"wrap": true,
			"style": "heading"
		},
		{
			"type": "TextBlock",
			"text": "Take a look at the image of the day, plus the last two days.",
			"wrap": true
		},
		{
			"type": "ImageSet",
			"imageSize": "medium",
			"images": [
				{
					"type": "Image",
					"url": "https://adaptivecards.io/content/BingAppIcon.png",
					"altText": "Bing App Icon"
				},
				{
					"type": "Image",
					"url": "https://adaptivecards.io/content/image1.png",
					"altText": "A close up of a flower"
				},
				{
					"type": "Image",
					"url": "https://adaptivecards.io/content/image2.png",
					"altText": "Two people standing on a mountain looking at the sunset"
				},
				{
					"type": "Image",
					"url": "https://adaptivecards.io/content/image3.png",
					"altText": "Water under a wooden bridge"
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.OpenUrl",
			"title": "View More",
			"url": "http://bing.com"
		}
	],
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"version": "1.5"
}

Код JSON (с шаблонизированием)

Data JSON

{
	"images": [
		{
			"url": "https://adaptivecards.io/content/BingAppIcon.png",
			"altText": "Bing App Icon"
		},
		{
			"url": "https://adaptivecards.io/content/image1.png",
			"altText": "A close up of a flower"
		},
		{
			"url": "https://adaptivecards.io/content/image2.png",
			"altText": "Two people standing on a mountain looking at the sunset"
		},
		{
			"url": "https://adaptivecards.io/content/image3.png",
			"altText": "Water under a wooden bridge"
		}
	]
}

Шаблон JSON

{
	"type": "AdaptiveCard",
	"body": [
		{
			"type": "TextBlock",
			"text": "The latest from Bing",
			"wrap": true,
			"style": "heading"
		},
		{
			"type": "TextBlock",
			"text": "Take a look at the image of the day, plus the last two days.",
			"wrap": true
		},
		{
			"type": "ImageSet",
			"imageSize": "medium",
			"images": [
				{
					"$data": "${images}",
					"type": "Image",
					"url": "${url}",
					"altText": "${altText}"
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.OpenUrl",
			"title": "View More",
			"url": "http://bing.com"
		}
	],
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"version": "1.5"
}