卡片仅支持文本属性中的格式设置,不支持在标题或副标题属性中进行格式设置。 可以使用 XML 或 HTML 格式的子集或 Markdown 指定格式,具体取决于卡类型。 对于当前和将来的自适应卡片开发,建议使用 Markdown 格式设置。

卡片类型之间的格式设置支持有所不同。 在桌面和移动Microsoft Teams 客户端和桌面浏览器中的 Teams 之间,卡片的呈现可能略有不同。

可以在任何 Teams 卡片中包含内联图像。 支持的图像格式包括.png、.jpg 或 .gif 格式。 将尺寸保持在 1024 x 1024 像素之内,文件大小小于 1MB。 不支持动画 .gif 图像。 有关详细信息,请参阅 类型的卡片

可以使用 Markdown 为包含某些受支持的样式的 Microsoft 365 组设置自适应卡片和连接器卡的格式。

使用 Markdown 的格式卡片

以下卡片类型支持 Teams 中的 Markdown 格式设置:

  • 自适应卡片:自适应卡片 Textblock 字段和 和 Fact.Title Fact.Value 中支持 Markdown。 自适应卡片不支持 HTML。
  • Microsoft 365 组的连接器卡:文本字段中Microsoft 365 组的连接器卡支持 Markdown 和受限 HTML。
  • 机器人中的 OAuth 登录卡不支持 Markdown。

    可以将换行符用于自适应卡片,使用 \r \n 列表中新行的转义序列。 桌面和移动版适用于自适应卡的 Teams 的格式不同。 Web、桌面和移动客户端都支持基于卡片的提及。 可以使用信息掩码属性来屏蔽特定信息,例如自适应卡 Input.Text 输入元素中用户的密码或敏感信息。 你可以使用 width 对象扩展自适应卡的宽度。 可以自适应卡片内启用键盘缓冲支持,并在用户键入输入时筛选输入选项集。 可以使用 msteams 属性添加在 Stageview 中选择性地显示图像的功能。

    桌面和移动版适用于自适应卡 和连接器卡片的 Teams 的格式不同。 在本部分中,可以通过 Markdown 格式示例了解自适应卡和连接器卡。

    自适应卡片的换行符

    可以在列表中使用 \r \n 转义序列来换行。 在列表中使用 \n\n 会导致缩进列表中的下一个元素。 如果需要在 TextBlock 中其他位置换行,请使用 \n\n

    自适应卡的移动和桌面差异

    在桌面上,自适应卡片 Markdown 格式显示在 Web 浏览器和 Teams 客户端应用程序中,如下图所示:

    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ "type": "TextBlock", "text": "This is some **bold** text" "type": "TextBlock", "text": "This is some _italic_ text" "type": "TextBlock", "text": "- Bullet \r- List \r", "wrap": true "type": "TextBlock", "text": "1. Numbered\r2. List\r", "wrap": true "type": "TextBlock", "text": "Check out [Adaptive Cards](https://adaptivecards.io)"

    自适应卡片支持表情符号。 以下代码显示了一个包含表情符号的自适应卡片示例:

    { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "Container", "items": [ { "type": "TextBlock", "text": "Publish Adaptive Card with emojis 🥰 ", "weight": "bolder", "size": "medium" }, ] }, ], }
    

    如果使用 REST API,请在请求标头中设置 charset=UTF-8 以在自适应卡片中添加表情符号。

    自适应卡片内提及的支持

    可以在 @mentions 自适应卡片正文中添加机器人和消息扩展响应。 若要添加 @mentions 卡片,请遵循与 频道和群组聊天对话中基于消息的提及相同的通知逻辑和呈现。

    自动程序和消息扩展可以在 TextBlockFactSet 元素的卡片内容中包含提及。

  • 机器人消息不支持频道和团队提及。
  • 但是,可以在 @mention 单个自适应卡片消息中多个用户,确保 传入 Webhook 的消息大小限制不超过 28 KB, 机器人消息不超过 40 KB。
  • 从传入 Webhook 发送的自适应卡片仅支持用户提及,不支持机器人提及。
  • 若要在自适应卡片中包含提及,应用需要包含以下元素:

    <at>username</at> 在支持的自适应卡元素中。
  • 卡片内容中 msteams 属性的 mention 对象包括所提及用户的 Teams 用户 ID。
  • userId 对于机器人 ID 和特定用户是唯一的。 它可用于 @mention 特定用户。 userId 可以使用在 获取用户 ID 中提到的一个选项来检索。

    带提及的示例自适应卡片

    下面的代码演示了具有提及的自适应卡片示例:

    "contentType": "application/vnd.microsoft.card.adaptive", "content": { "type": "AdaptiveCard", "body": [ "type": "TextBlock", "text": "Hi <at>John Doe</at>" "$schema": "https://adaptivecards.io/schemas/adaptive-card.json", "version": "1.0", "msteams": { "entities": [ "type": "mention", "text": "<at>John Doe</at>", "mentioned": { "id": "29:123124124124", "name": "John Doe"

    Microsoft用户提及中的 Entra 对象 ID 和 UPN

    借助 Teams 平台,除了现有提及 ID 外,还可以使用 UPN) (Microsoft Entra 对象 ID 和用户主体名称来提及用户。 带有自适应卡的机器人和带有传入 Webhook 的连接器支持两个用户提及的 ID。

    下表描述了新支持的用户提及 ID:

    使用自适应卡片在机器人中提及用户

    除了现有 ID 外,机器人还支持使用 Microsoft Entra 对象 ID 和 UPN 的用户提及。 短信、自适应卡片正文和消息扩展响应的自动程序中提供了对两个新 ID 的支持。 机器人支持对话和 invoke 方案中的提及 ID。 用户使用 ID 时 @mentioned ,会收到活动源通知。

    使用机器人中的自适应卡片进行用户提及不需要架构更新和 UI/UX 更改。

    使用自适应卡在机器人中提到的用户示例如下:

    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.0", "type": "AdaptiveCard", "body": [ "type": "TextBlock", "text": "Hi <at>Adele UPN</at>, <at>Adele Microsoft Entra ID</at>" "msteams": { "entities": [ "type": "mention", "text": "<at>Adele UPN</at>", "mentioned": { "id": "AdeleV@contoso.onmicrosoft.com", "name": "Adele Vance" "type": "mention", "text": "<at>Adele Microsoft Entra ID</at>", "mentioned": { "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd", "name": "Adele Vance"

    下图演示了在机器人中使用自适应卡片的用户提及:

  • 在传入 Webhook 的架构中启用用户提及,以支持Microsoft Entra 对象 ID 和 UPN。
  • 使用 Microsoft Entra 对象 ID 和 UPN 的用户提及不需要更改 UI/UX。
  • 传入 Webhook 中的用户提及示例如下所示:

    "type": "message", "attachments": [ "contentType": "application/vnd.microsoft.card.adaptive", "content": { "type": "AdaptiveCard", "body": [ "type": "TextBlock", "size": "Medium", "weight": "Bolder", "text": "Sample Adaptive Card with User Mention" "type": "TextBlock", "text": "Hi <at>Adele UPN</at>, <at>Adele Microsoft Entra ID</at>" "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.0", "msteams": { "entities": [ "type": "mention", "text": "<at>Adele UPN</at>", "mentioned": { "id": "AdeleV@contoso.onmicrosoft.com", "name": "Adele Vance" "type": "mention", "text": "<at>Adele Microsoft Entra ID</at>", "mentioned": { "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd", "name": "Adele Vance"

    下图说明了在传入 Webhook 中的用户提及:

    以下 JSON 代码是 Persona 卡片的示例:

    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0.0", "body": [ "type": "TextBlock", "text": "Persona", "weight": "bolder" "type": "Component", "name": "graph.microsoft.com/user", "view": "compact", "properties": { "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817", "displayName": "Daniela Mandera", "userPrincipalName": "damandera@microsoft.com"
  • 角色集:如果要在自适应卡片中显示多个用户,则只显示用户的“人员”图标。

    以下 JSON 代码是角色集的示例:

    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0.0", "body": [ "type": "TextBlock", "text": "Persona Set", "weight": "bolder" "type": "Component", "name": "graph.microsoft.com/users", "view": "compact", "properties": { "users": [ "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817", "displayName": "Daniela Mandera", "userPrincipalName": "damandera@microsoft.com" "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817", "displayName": "Daniela Mandera", "userPrincipalName": "damandera@microsoft.com"

    无法在自适应卡片中自定义角色和角色集的样式。

    下图是自适应卡片中人员图标的示例:

    自适应组件是由 模板 化和本机自适应卡片元素提供支持的高级组件。 component类型可以在卡片正文内的任意位置使用,组件数据在 属性中properties定义。 下面的 properties 组件数据直接传递给组件。 属性properties定义 Persona 和 Persona Set 的格式,并且自适应卡片架构中的类型将忽略component下面的properties所有其他属性。

    机器人可以查询成员列表及其基本用户配置文件,包括 Teams 用户 ID 和 Microsoft Entra 信息,例如 nameiduserPrincipalName。 有关详细信息,请参阅 提取名单或用户配置文件

    下图显示了 Teams 桌面和移动客户端上的自适应卡片中的人员图标:

    桌面客户端

    该功能仅支持客户端信息掩码。 掩码输入文本以明文形式发送到在 机器人配置期间指定的 HTTPS 终结点地址

    若要屏蔽自适应卡片中的信息,请将 属性添加到style键入input.text,并将其值设置为 Password

    带掩码属性的示例自适应卡片

    下面的代码演示了具有掩码属性的自适应卡片的示例:

    "type": "Input.Text", "id": "secretThing", "style": "password",

    下图是自适应卡片中屏蔽信息的示例:

    自适应卡片响应布局

    自适应卡片会自动根据主机应用程序的样式调整其外观,但具有固定布局,在 Teams 移动和桌面客户端中保持不变。 必须将自适应卡片设计为在任何设备上外观极佳,以便跨聊天、频道和会议聊天提供增强的用户体验。 本文介绍如何设计响应式自适应卡片。

    自适应卡片响应布局可帮助你设计具有针对不同卡片宽度的不同布局的卡片。

    设计响应式自适应卡片

    targetWidth对任何元素使用 属性可以:

  • 根据卡片的宽度显示或隐藏任何元素。

  • 在不同元素上设置不同的目标宽度以创建不同的布局。

    下表列出了可用 targetWidth 值:

    下面是自适应卡片的 JSON 示例,这些示例设计为不使用 targetWidth ,并且已修改为使用targetWidth

  • 设计时不使用 的 targetWidth自适应卡片:

    "type": "AdaptiveCard", "body": [ "type": "ColumnSet", "columns": [ "type": "Column", "items": [ "type": "Image", "style": "Person", "url": "https://aka.ms/AAp9xo4", "size": "Small" "width": "auto" "type": "Column", "spacing": "medium", "verticalContentAlignment": "center", "items": [ "type": "TextBlock", "weight": "Bolder", "text": "David Claux", "wrap": true "width": "auto" "type": "Column", "spacing": "medium", "items": [ "type": "TextBlock", "text": "Platform Architect", "isSubtle": true, "wrap": true "width": "stretch", "verticalContentAlignment": "center" "$schema": "https://adaptivecards.io/schemas/adaptive-card.json", "version": "1.5"

    下图显示了不同卡片宽度的自适应卡片的呈现:

  • 当卡的宽度较 时,卡片看起来不错。

    有关如何设计自适应卡片的详细信息,请参阅 为 Teams 应用设计自适应卡片

    键盘缓冲支持

    Input.Choiceset架构元素中,要求用户筛选和选择大量选项可能会显著降低任务完成的速度。 自适应卡片内的键盘缓冲支持可以通过在用户键入输入时缩小或筛选输入选项集来简化输入选择。

    若要在 Input.Choiceset 中启用键盘缓冲,请将 style 设置为 filtered 并确保 isMultiSelect 设置为 false

    具有键盘缓冲支持的示例自适应卡片

    下面的代码演示了具有键盘缓冲支持的自适应卡片示例:

    "type": "Input.ChoiceSet", "label": "Select a user", "isMultiSelect": false, "choices": [ { "title": "User 1", "value": "User1" }, { "title": "User 2", "value": "User2" } "style": "filtered"

    自适应卡片中图像的阶段视图

    在自适应卡片中,可以使用 msteams 属性添加在 Stageview 中选择性地显示图像的功能。 当用户将鼠标悬停在图像上时,可以看到 allowExpand 属性设置为 true 的展开图标。 以下代码是 属性的示例 msteams

    "type": "AdaptiveCard", "body": [ "type": "Image", "url": "https://picsum.photos/200/200?image=110", "msTeams": { "allowExpand": true "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.2"

    当用户将鼠标悬停在图像上时,右上角会显示一个展开图标,如下图所示:

    以下代码演示 Markdown 连接器卡的格式设置示例:

    "contentType": "application/vnd.microsoft.teams.card.o365connector", "content": { "@type": "MessageCard", "@context": "https://schema.org/extensions", "summary": "Summary", "title": "Connector Card Markdown formatting", "sections": [ "text": "This is some **bold** text" "text": "This is some _italic_ text" "text": "# Header 1\r## Header 2\r### Header 3" "text": "- Bullet \r- List \r" "text": "1. Numbered\r1. List \r" "text": "Link: [Bing](https://www.bing.com)" "text": "embedded image link: ![Duck on a rock](https://aka.ms/Fo983c)" "text": "`preformatted text`" "text": "Newlines (backslash n, backslash n):\n\nline a\n\nline b\n\nline c" "text": ">This is a blockquote"

    自适应卡片中的 CodeBlock

    使用 CodeBlock 元素,可以在 Teams 聊天、频道和会议中将代码片段共享为格式丰富的自适应卡片。 具有 元素的 CodeBlock 自适应卡片使代码片段易于阅读,因为缩进、编号和语法突出显示与编程语言匹配。 此外,可以添加操作按钮以查看代码的源,或者在集成开发环境中编辑代码, (IDE) ,例如Microsoft Visual Studio 或 Microsoft Visual Studio Code。

    以下屏幕截图显示了包含代码片段的自适应卡片:

    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.5", "body": [ "type": "TextBlock", "text": "editor.js", "style": "heading" "type": "TextBlock", "text": "Lines 61 - 76" "type": "CodeBlock", "codeSnippet": "/**\n* @author John Smith <john.smith@example.com>\n*/\npackage l2f.gameserver.model;\n\npublic abstract strictfp class L2Char extends L2Object {\n public static final Short ERROR = 0x0001;\n\n public void moveTo(int x, int y, int z) {\n _ai = null;\n log(\"Shouldn't be called\");\n if (1 > 5) { // what!?\n return;\n }\n }\n}", "language": "java", "startLineNumber": 61 "actions": [ "type": "Action.OpenUrl", "title": "View in Azure Repos", "url": "https://azure.microsoft.com/en-us/products/devops/repos/" "type": "Action.OpenUrl", "title": "Edit in vscode.dev", "url": "https://vscode.dev/"

    元素 CodeBlock 支持以下属性:

  • 特殊字符在 属性中 codeSnippet 具有特定函数。 例如,换行符 \n 触发换行符。
  • 若要在自适应卡片中将换行符 \n 显示为代码片段的一部分,请确保将其转义为 \\n 属性中的 codeSnippet 。 否则,Teams 在卡片的 \n 下一行中呈现代码。
  • 具有 元素的 CodeBlock 自适应卡片仅在 Teams Web 和桌面客户端中受支持。
  • 自适应卡片中的代码片段是只读的,不可编辑。
  • 自适应卡片仅预览代码片段的前 10 行。 如果代码行超过 10 行,用户必须选择“ 展开 ”才能查看代码片段的其余部分。
  • 自适应卡片溢出菜单

    Teams 中的自适应卡片支持溢出菜单。 可以为自适应卡片中的所有辅助操作填充溢出菜单。 可将自适应卡中的溢出菜单添加到以下内容:

    操作:在操作中,主按钮显示在自适应卡片上,辅助按钮位于溢出菜单中。

    ActionSet:ActionSet 是自适应卡片中多个操作的组合。 每个操作集都可以有一个溢出菜单。

    自适应卡片最多支持在卡片上查看六个主要操作。 任何其他主操作都显示在溢出菜单中。

    溢出菜单在机器人发送的卡和自适应卡中根级别的 actions 消息扩展卡上的行为不同。 机器人发送卡片上的溢出菜单显示为弹出上下文菜单,消息扩展卡上显示在右上角的“更多选项 (...) 图标下。 该行为不适用于 ActionSet 自适应卡片中的 。

    下图是机器人发送卡和消息扩展卡中的溢出菜单示例:

    以下卡片类型支持 Teams 中的 HTML 格式设置:

  • Microsoft 365 组的连接器卡:Microsoft 365 组的连接器卡支持有限 Markdown 和 HTML 格式。
  • 主图和缩略图卡:简单卡片 (如主图和缩略图卡) 支持 HTML 标记。
  • Microsoft 365 组和简单卡片的桌面版和移动版 Teams 的格式不同。 在本部分中,可以通过 HTML 格式示例了解连接器卡和简单卡。

    以下代码演示 HTML 连接器卡的格式设置示例:

    "contentType": "application/vnd.microsoft.teams.card.o365connector", "content": { "@type": "MessageCard", "@context": "https://schema.org/extensions", "summary": "Summary", "title": "Connector Card HTML formatting", "sections": [ "text": "This is some <strong>bold</strong> text" "text": "This is some <em>italic</em> text" "text": "This is some <strike>strikethrough</strike> text" "text": "<h1>Header 1</h1>\r<h2>Header 2</h2>\r <h3>Header 3</h3>" "text": "bullet list <ul><li>text</li><li>text</li></ul>" "text": "ordered list <ol><li>text</li><li>text</li></ol>" "text": "hyperlink <a href=\"https://www.bing.com/\">Bing</a>" "text": "embedded image <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img>" "text": "preformatted text <pre>text</pre>" "text": "Paragraphs <p>Line a</p><p>Line b</p>" "text": "<blockquote>Blockquote text</blockquote>"

    字符格式设置(如粗体和斜体)在 Android 上正确显示。

    简单卡片的格式示例

    上一部分中的图像是使用 Teams App Studio创建的,其中主图卡的文本属性设置为以下字符串:

    <p>bold: <strong>Bold Text</strong></p><p>italic: <em>Italic Text</em></p><p>strikethrough: <strike>Strikethrough text</strike></p><h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3><p>bullet list: <ul><li>text</li><li>text</li></ul></p><p>ordered list: <ol><li>text</li><li>text</li></ol></p><pre>preformatted text</pre><blockquote>blockquote text</blockquote></p><p>hyperlink: <a href=\"https://www.bing.com/\">Bing</a></p><p>embedded image: <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img></p>

    可以通过修改此代码在自己的卡片中测试格式。

    S.No。 Node.js