Поделиться через

Погода большая

Замечание

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

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

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

Большая выборка по погоде

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

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

JSON

{
	"type": "AdaptiveCard",
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"version": "1.5",
	"body": [
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": 35,
					"items": [
						{
							"type": "TextBlock",
							"text": "Redmond, WA",
							"size": "large",
							"weight": "bolder",
							"wrap": true,
							"style": "heading"
						},
						{
							"type": "TextBlock",
							"text": "July 12, 5:30 PM",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "24 / 20",
							"size": "extraLarge",
							"spacing": "none",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "Cloudy",
							"isSubtle": true,
							"spacing": "none",
							"wrap": true
						}
					]
				},
				{
					"type": "Column",
					"width": "auto",
					"items": [
						{
							"type": "Image",
							"url": "https://adaptivecards.io/content/MostlyCloudy.png",
							"altText": "Mostly Cloudy",
							"size": "medium",
							"horizontalAlignment": "right"
						}
					]
				}
			]
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "Wind",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "10 km/h",
							"spacing": "small",
							"wrap": true
						}
					],
					"width": 1
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "Precipitation",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "1.5 cm",
							"spacing": "small",
							"wrap": true
						}
					],
					"width": 1
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "Humidity",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "65%",
							"spacing": "small",
							"wrap": true
						}
					],
					"width": 1
				}
			]
		},
		{
			"type": "ColumnSet",
			"spacing": "medium",
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"text": "Fri",
							"weight": "bolder",
							"wrap": true
						},
						{
							"type": "Image",
							"url": "https://adaptivecards.io/content/MostlyCloudy.png",
							"altText": "Mostly Cloudy",
							"size": "small",
							"horizontalAlignment": "center"
						},
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"text": "23",
							"spacing": "none",
							"wrap": true
						}
					],
					"width": 1
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"text": "Sat",
							"weight": "bolder",
							"wrap": true
						},
						{
							"type": "Image",
							"url": "https://adaptivecards.io/content/Cloudy.png",
							"altText": "Cloudy",
							"size": "small",
							"horizontalAlignment": "center"
						},
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"text": "21",
							"spacing": "none",
							"wrap": true
						}
					],
					"width": 1
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"text": "Sun",
							"weight": "bolder",
							"wrap": true
						},
						{
							"type": "Image",
							"url": "https://adaptivecards.io/content/Sunny.png",
							"altText": "Sunny",
							"size": "small",
							"horizontalAlignment": "center"
						},
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"text": "24",
							"spacing": "none",
							"wrap": true
						}
					],
					"width": 1
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"text": "Mon",
							"weight": "bolder",
							"wrap": true
						},
						{
							"type": "Image",
							"url": "https://adaptivecards.io/content/MostlyCloudy.png",
							"altText": "Mostly Cloudy",
							"size": "small",
							"horizontalAlignment": "center"
						},
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"text": "24",
							"spacing": "none",
							"wrap": true
						}
					],
					"width": 1
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"text": "Tue",
							"weight": "bolder",
							"wrap": true
						},
						{
							"type": "Image",
							"url": "https://adaptivecards.io/content/ModerateRain.png",
							"altText": "Moderate Rain",
							"size": "small",
							"horizontalAlignment": "center"
						},
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"text": "19",
							"spacing": "none",
							"wrap": true
						}
					],
					"width": 1
				}
			]
		}
	]
}

Код JSON (с шаблонизацией)

Данные JSON

{
	"location": "Redmond, WA",
	"currentDate": "July 12, 5:30 PM",
	"currentTemp": "24",
	"lowTemp": "20",
	"condition": "Cloudy",
	"currentConditionImage": "https://adaptivecards.io/content/MostlyCloudy.png",
	"wind": "10 km/h",
	"precipitation": "1.5 cm",
	"humidity": "65%",
	"forecast": [
		{
			"day": "Fri",
			"image": "https://adaptivecards.io/content/MostlyCloudy.png",
			"temp": "23"
		},
		{
			"day": "Sat",
			"image": "https://adaptivecards.io/content/Cloudy.png",
			"temp": "21"
		},
		{
			"day": "Sun",
			"image": "https://adaptivecards.io/content/Sunny.png",
			"temp": "24"
		},
		{
			"day": "Mon",
			"image": "https://adaptivecards.io/content/MostlyCloudy.png",
			"temp": "24"
		},
		{
			"day": "Tue",
			"image": "https://adaptivecards.io/content/ModerateRain.png",
			"temp": "19"
		}
	]
}

Шаблон JSON

{
	"type": "AdaptiveCard",
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"version": "1.5",
	"body": [
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": 35,
					"items": [
						{
							"type": "TextBlock",
							"text": "${location}",
							"size": "large",
							"weight": "bolder",
							"style": "heading",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "${currentDate}",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "${currentTemp} / ${lowTemp}",
							"size": "extraLarge",
							"spacing": "none",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "${condition}",
							"isSubtle": true,
							"spacing": "none",
							"wrap": true
						}
					]
				},
				{
					"type": "Column",
					"width": "auto",
					"items": [
						{
							"type": "Image",
							"url": "${currentConditionImage}",
							"altText": "Mostly Cloudy",
							"size": "medium",
							"horizontalAlignment": "right"
						}
					]
				}
			]
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "Wind",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "${wind}",
							"spacing": "small",
							"wrap": true
						}
					],
					"width": 1
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "Precipitation",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "${precipitation}",
							"spacing": "small",
							"wrap": true
						}
					],
					"width": 1
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "Humidity",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "${humidity}",
							"spacing": "small",
							"wrap": true
						}
					],
					"width": 1
				}
			]
		},
		{
			"type": "ColumnSet",
			"spacing": "medium",
			"columns": [
				{
					"$data": "${forecast}",
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"text": "${day}",
							"weight": "bolder",
							"wrap": true
						},
						{
							"type": "Image",
							"url": "${image}",
							"altText": "Mostly Cloudy",
							"size": "small",
							"horizontalAlignment": "center"
						},
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"text": "${temp}",
							"spacing": "none",
							"wrap": true
						}
					],
					"width": 1
				}
			]
		}
	]
}
  • Last updated on