備註
你正在建立由 Adaptive Cards 驅動的 Copilot、Teams 或 Outlook 應用場景嗎？ 造訪 Adaptive Card Documentation Hub，這個全新的一站式平台，滿足您所有 Adaptive Card 的需求！ 它擁有你所需的所有資源，包括許多新功能的完整文件，例如響應式版面、圖示、徽章、旋轉木馬、圖表等等！
這些範例只是你可以製作卡片類型的 預告 。 去調整它們，使任何情境都能實現！
關於無障礙的重要說明： 在結構的 1.3 版本中，我們在 Inputs 上引入 了標籤 屬性以提升可及性。 如果你目標的 主機應用程式 支援 v1.3，建議使用 label 而非 TextBlock ，如下方範例所示。 當大多數 Host 應用程式更新到最新版本後，我們會相應更新樣本。
應用程式登入範例
以下章節展示「應用程式登入」自適應卡範例的 JSON，顯示有模板與無模板兩種。
JSON 程式碼（無模板）
JSON
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "Application Login",
"horizontalAlignment": "center",
"wrap": true,
"style": "heading"
},
{
"type": "Input.Text",
"style": "text",
"id": "UserVal",
"label": "Username",
"isRequired": true,
"errorMessage": "Username is required"
},
{
"type": "Input.Text",
"id": "PassVal",
"style": "password",
"label": "Password",
"isRequired": true,
"errorMessage": "Password is required"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Login",
"data": {
"id": "LoginVal"
}
}
]
}
JSON 程式碼（含模板）
資料 JSON
{
"ApplicationInfo": {
"title": "Application Login"
}
}
範本 JSON
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": " ${ApplicationInfo.title}",
"horizontalAlignment": "center",
"wrap": true,
"style": "heading"
},
{
"type": "Input.Text",
"style": "text",
"id": "UserVal",
"label": "Username",
"isRequired": true,
"errorMessage": "Username is required"
},
{
"type": "Input.Text",
"id": "PassVal",
"style": "password",
"label": "Password",
"isRequired": true,
"errorMessage": "Password is required"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Login",
"data": {
"id": "LoginVal"
}
}
]
}