卡片参考Cards Reference

本部分中列出的卡片在团队的 bot 中受支持。The cards listed in this section are supported in bots for Teams. 它们基于由 Bot 框架定义的卡,但团队不支持所有机器人框架卡,并已添加了其自己的部分。They are based on cards defined by the Bot Framework, but Teams does not support all Bot Framework cards and has added some of its own. 下面的参考中称为不同之处。Differences are called out in the references below.

卡片示例Card examples

您可以在机器人生成器 SDK (v3)的文档中找到有关如何使用卡片的其他信息。You can find additional information on how to use cards in the documentation for the Bot Builder SDK (v3). GitHub 上的 Microsoft/BotBuilder-示例存储库中也提供了代码示例。There are also code samples available in the Microsoft/BotBuilder-Samples repository on GitHub.

卡片类型Types of cards

此表显示了可供您使用的卡片类型。This table shows the types of cards available to you.

卡片类型Card Type 说明Description
自适应卡片Adaptive Card 可包含文本、语音、图像、按钮和输入字段的任意组合的高度可自定义卡片。Highly customizable card that can contain any combination of text, speech, images, buttons and input fields.
英雄卡片Hero Card 通常包含一个大图像、一个或多个按钮以及少量文本。Typically contains a single large image, one or more buttons, and a small amount of text.
列出卡片List Card 项目的滚动列表。A scrolling list of items.
Office 365 连接器卡Office 365 Connector Card 具有多个节、字段、图像和操作的灵活布局。Flexible layout with multiple sections, fields, images and actions.
收据卡Receipt Card 向用户提供收据。Provides a receipt to the user.
登录卡片Signin Card 启用机器人以请求用户登录。Enables a bot to request that a user sign in.
缩略图卡片Thumbnail Card 通常包含一个缩略图图像、一些短文本以及一个或多个按钮。Typically contains a single thumbnail image, some short text, and one or more buttons.
卡片集合Card Collections 用于在单个响应中返回多个项目Used to return multiple items in a single response

所有卡片的通用属性Common properties for all cards

内嵌卡片图像Inline card images

你的卡片可以通过包含指向公开可用图像的链接来包含内嵌图像。Your card can contain an inline image by including a link to your publicly available image. 出于性能考虑,强烈建议您将映像托管在公共内容传递网络(CDN)上。For performance purposes we highly recommend you host your image on a public content-delivery network (CDN).

图像在大小上向上或向下放大,同时保持纵横比以覆盖图像区域,然后从中心裁剪以达到适合该卡片的纵横比。Images are scaled up or down in size while maintaining the aspect ratio to cover the image area, and then cropped from center to achieve the appropriate aspect ratio for the card.

图像必须最多为1024×1024和 1 MB (PNG、JPEG 或 GIF 格式);不正式支持动画 GIF。Images must be at most 1024×1024 and 1 MB in PNG, JPEG, or GIF format; animated GIF is not officially supported.

属性Property 类型Type 说明Description
urlurl URLURL 指向图像的 HTTPS URLHTTPS URL to the image
altalt StringString 图像的可访问说明Accessible description of the image

按钮Buttons

按钮以堆叠方式显示在卡片底部。Buttons are shown stacked at the bottom of the card. 按钮文本总是在单行上,如果文本超出按钮宽度,则将被截尾取整。Button text is always on a single line and will be truncated if the text exceeds the button width. 不会显示超出卡片支持的最大数量的任何其他按钮。Any additional buttons beyond the maximum number supported by the card will not be shown.

有关详细信息,请参阅卡片操作See Card Actions for more information.

卡片格式Card Formatting

有关卡片中的文本格式的详细信息,请参阅卡片格式See Card Formatting for more information on text formatting in cards.

自适应卡片Adaptive card

一种可自定义的卡片,可包含文本、语音、图像、按钮和输入字段的任意组合。A customizable card that can contain any combination of text, speech, images, buttons, and input fields. 请参阅自适应卡片 v 1.2.0See Adaptive Cards v1.2.0.

对自适应卡片的支持Support for Adaptive cards

团队中的 botBots in Teams 消息扩展Messaging Extensions 连接器Connectors Bot 框架Bot Framework

备注

目前,工作组平台上的自适应卡版1.2 中不支持媒体元素。Media elements are currently not supported in Adaptive cards v1.2 on the Teams platform.

自适应卡片示例Example Adaptive card

自适应卡片卡的示例

{
  "contentType": "application/vnd.microsoft.card.adaptive",
  "content": {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
      {
        "type": "Container",
        "items": [
          {
            "type": "TextBlock",
            "text": "Publish Adaptive Card schema",
            "weight": "bolder",
            "size": "medium"
          },
          {
            "type": "ColumnSet",
            "columns": [
              {
                "type": "Column",
                "width": "auto",
                "items": [
                  {
                    "type": "Image",
                    "url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
                    "size": "small",
                    "style": "person"
                  }
                ]
              },
              {
                "type": "Column",
                "width": "stretch",
                "items": [
                  {
                    "type": "TextBlock",
                    "text": "Matt Hidinger",
                    "weight": "bolder",
                    "wrap": true
                  },
                  {
                    "type": "TextBlock",
                    "spacing": "none",
                    "text": "Created {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
                    "isSubtle": true,
                    "wrap": true
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "Container",
        "items": [
          {
            "type": "TextBlock",
            "text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
            "wrap": true
          },
          {
            "type": "FactSet",
            "facts": [
              {
                "title": "Board:",
                "value": "Adaptive Card"
              },
              {
                "title": "List:",
                "value": "Backlog"
              },
              {
                "title": "Assigned to:",
                "value": "Matt Hidinger"
              },
              {
                "title": "Due date:",
                "value": "Not set"
              }
            ]
          }
        ]
      }
    ],
    "actions": [
      {
        "type": "Action.ShowCard",
        "title": "Set due date",
        "card": {
          "type": "AdaptiveCard",
          "body": [
            {
              "type": "Input.Date",
              "id": "dueDate"
            }
          ],
          "actions": [
            {
              "type": "Action.Submit",
              "title": "OK"
            }
          ]
        }
      },
      {
        "type": "Action.ShowCard",
        "title": "Comment",
        "card": {
          "type": "AdaptiveCard",
          "body": [
            {
              "type": "Input.Text",
              "id": "comment",
              "isMultiline": true,
              "placeholder": "Enter your comment"
            }
          ],
          "actions": [
            {
              "type": "Action.Submit",
              "title": "OK"
            }
          ]
        }
      }
    ]
  }  
}

有关自适应卡片的详细信息For more information on Adaptive cards

英雄卡片Hero card

通常包含一个大图像(一个或多个按钮和文本)的卡片。A card that typically contains a single large image, one or more buttons and text.

对英雄卡片的支持Support for Hero cards

团队中的 botBots in Teams 消息扩展Messaging Extensions 连接器Connectors Bot 框架Bot Framework

一个英雄卡片的属性Properties of a Hero card

属性Property 类型Type 说明Description
titletitle 格式文本 Rich text 卡片的标题。Title of the card. 最多2行;当前不支持的格式Maximum 2 lines; formatting not currently supported
字幕subtitle 格式文本 Rich text 卡片的副标题。Subtitle of the card. 最多2行;当前不支持的格式Maximum 2 lines; formatting not currently supported
texttext 格式文本 Rich text 文本显示在副标题的正下方;请参阅卡片格式设置选项Text appears just below the subtitle; see Card formatting for formatting options
图形images 图像数组Array of images 显示在卡片顶部的图像。Image displayed at top of card. 纵横比16:9Aspect ratio 16:9
按钮buttons Action 对象的数组Array of action objects 适用于当前卡片的一组操作。Set of actions applicable to the current card. 最大6Maximum 6
即可tap Action 对象Action object 当用户点击卡片本身时,将激活此操作This action will be activated when the user taps on the card itself

示例英雄卡片Example Hero card

一个英雄卡片示例

{
   "contentType": "application/vnd.microsoft.card.hero",
   "content": {
     "title": "Seattle Center Monorail",
     "subtitle": "Seattle Center Monorail",
     "text": "The Seattle Center Monorail is an elevated train line between Seattle Center (near the Space Needle) and downtown Seattle. It was built for the 1962 World's Fair. Its original two trains, completed in 1961, are still in service.",
     "images": [
       {
         "url":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Seattle_monorail01_2008-02-25.jpg/1024px-Seattle_monorail01_2008-02-25.jpg"
       }
     ],
    "buttons": [
      {
         "type": "openUrl",
         "title": "Official website",
         "value": "https://www.seattlemonorail.com"
       },
      {
        "type": "openUrl",
        "title": "Wikipeda page",
        "value": "https://en.wikipedia.org/wiki/Seattle_Center_Monorail"
       }
     ]
   }
}

有关英雄卡片的详细信息For more information on Hero cards

Bot 框架参考:Bot Framework reference:

列出卡片List card

团队添加了列表卡,以提供列表集合可以提供的功能之外的功能。The list card has been added by Teams to provide functions beyond what the list collection can provide. 清单卡片提供了项的滚动列表。The list card provides a scrolling list of items.

支持列表卡片Support for List cards

团队中的 botBots in Teams 消息扩展Messaging Extensions 连接器Connectors Bot 框架Bot Framework

列表卡的属性Properties of a List card

属性Property 类型Type 说明Description
titletitle 格式文本 Rich text 卡片的标题。Title of the card. 最多2行;当前不支持的格式Maximum 2 lines; formatting not currently supported
itemsitems 列表项的数组Array of list items
按钮buttons Action 对象的数组Array of action objects 适用于当前卡片的一组操作。Set of actions applicable to the current card. 最大6。Maximum 6. 不会在移动设备上呈现。Does not render on mobile.

列表卡片示例Example List card

{
  "contentType": "application/vnd.microsoft.teams.card.list",
  "content": {
    "title": "Card title",
    "items": [
      {
        "type": "file",
        "id": "https://contoso.sharepoint.com/teams/new/Shared%20Documents/Report.xlsx",
        "title": "Report",
        "subtitle": "teams > new > design",
        "tap": {
          "type": "imBack",
          "value": "editOnline https://contoso.sharepoint.com/teams/new/Shared%20Documents/Report.xlsx"
        }
      },
      {
        "type": "resultItem",
        "icon": "https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Trello-128.png",
        "title": "Trello title",
        "subtitle": "A Trello subtitle",
        "tap": {
          "type": "openUrl",
          "value": "http://trello.com"
        }
      },
      {
        "type": "section",
        "title": "Manager"
      },
      {
        "type": "person",
        "id": "JohnDoe@contoso.com",
        "title": "John Doe",
        "subtitle": "Manager",
        "tap": {
          "type": "imBack",
          "value": "whois JohnDoe@contoso.com"
        }
      }
    ],
    "buttons": [
      {
        "type": "imBack",
        "title": "Select",
        "value": "whois"
      }
    ]
  }
}

Office 365 连接器卡Office 365 connector card

在团队中受支持,而不是在 Bot 框架中。Supported in Teams, not in Bot Framework.

Office 365 连接器卡提供了具有多个节、字段、图像和操作的灵活布局。The Office 365 Connector card provides a flexible layout with multiple sections, fields, images, and actions. 此卡封装连接器卡,以便 bot 可以使用它。This card encapsulates a connector card so that it can be used by bots. 有关连接器卡和 O365 卡之间的差异,请参阅 "注释" 部分。See the notes section for differences between connector cards and the O365 card.

支持 Office 365 连接器卡Support for Office 365 connector cards

团队中的 botBots in Teams 消息扩展Messaging Extensions 连接器Connectors Bot 框架Bot Framework

Office 365 连接器卡的属性Properties of the Office 365 connector card

属性Property 类型Type 说明Description
titletitle 格式文本 Rich text 卡片的标题。Title of the card. 最多2行;当前不支持的格式Maximum 2 lines; formatting not currently supported
摘要summary 格式文本 Rich text 卡片摘要。Summary of the card. 最多2行;当前不支持的格式Maximum 2 lines; formatting not currently supported
texttext 格式文本 Rich text 文本显示在副标题的正下方;请参阅卡片格式设置选项Text appears just below the subtitle; see Card formatting for formatting options
themeColorthemeColor 十六进制字符串HEX string 重写从应用程序清单提供的 accentColor 的颜色color that overrides the accentColor provided from the application manifest

Office 365 连接器卡上的备注Notes on the Office 365 connector card

Office 365 连接器卡在 Microsoft 团队中正常工作,包括ActionCard 操作Office 365 Connector cards function properly on Microsoft Teams, including ActionCard actions.

使用连接器中的连接器卡和在你的 bot 中使用连接器卡的一个重要区别是处理智能卡操作。One important difference between using Connector cards from a Connector and using Connector cards in your bot is the handling of card actions.

  • 对于连接器,终结点通过 HTTP POST 接收卡有效负载。For a Connector, the endpoint receives the card payload via HTTP POST.
  • 对于 bot,该 HttpPOST 操作触发 invoke 仅将操作 ID 和正文发送到 bot 的活动。For a bot, the HttpPOST action triggers an invoke activity that sends only the action ID and body to the bot.

每个连接器卡最多可以显示10个部分,每个部分最多可包含5个图像和5个操作。Each Connector card can display a maximum of 10 sections, and each section can contain a maximum of 5 images and 5 actions.

备注

将不会显示邮件中的任何其他节、图像或操作。Any additional sections, images, or actions in a message will not appear.

所有文本字段都支持 Markdown 和 HTML。All text fields support Markdown and HTML. 您可以通过在邮件中设置属性来控制哪些部分使用 Markdown 或 HTML markdownYou can control which sections use Markdown or HTML by setting the markdown property in a message. 默认情况下, markdown 设置为 true ; 如果要改为使用 HTML,则将设置 markdownfalseBy default, markdown is set to true; if you want to use HTML instead, set markdown to false.

如果指定 themeColor 属性,它将替代 accentColor 应用程序清单中的属性。If you specify the themeColor property, it overrides the accentColor property in the app manifest.

若要指定的呈现样式 activityImage ,可以按 activityImageType 如下所示进行设置。To specify the rendering style for activityImage, you can set activityImageType as follows.

Value 说明Description
avatar 设置activityImage将裁剪为圆形Default; activityImage will be cropped as a circle
article activityImage将显示为一个矩形,并保持其纵横比activityImage will be displayed as a rectangle and retain its aspect ratio

有关连接器卡属性的所有其他详细信息,请参阅可操作邮件卡参考For all other details about Connector card properties, see the Actionable message card reference. Microsoft 团队目前不支持的连接器卡片属性如下所示:The only Connector card properties that Microsoft Teams does not currently support are as follows:

  • heroImage
  • hideOriginalBody
  • startGroup(始终按 true 团队处理)startGroup (always treated as true in Teams)
  • originator
  • correlationId

示例 Office 365 连接器卡Example Office 365 connector card

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "http://schema.org/extensions",
    "summary": "John Doe commented on Trello",
    "title": "Project Tango",
    "sections": [
        {
            "activityTitle": "John Doe commented",
            "activitySubtitle": "On Project Tango",
            "activityText": "\"Here are the designs\"",
            "activityImage": "http://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg"
        },
        {
            "title": "Details",
            "facts": [
                {
                    "name": "Labels",
                    "value": "Designs, redlines"
                },
                {
                    "name": "Due date",
                    "value": "Dec 7, 2016"
                },
                {
                    "name": "Attachments",
                    "value": "[final.jpg](http://connectorsdemo.azurewebsites.net/images/WIN14_Jan_04.jpg)"
                }
            ]
        },
        {
            "title": "Images",
            "images": [
                {
                    "image":"http://connectorsdemo.azurewebsites.net/images/MicrosoftSurface_024_Cafe_OH-06315_VS_R1c.jpg"
                },
                {
                    "image":"http://connectorsdemo.azurewebsites.net/images/WIN12_Scene_01.jpg"
                },
                {
                    "image":"http://connectorsdemo.azurewebsites.net/images/WIN12_Anthony_02.jpg"
                }
            ]
        }
    ],
    "potentialAction": [
        {
            "@context": "http://schema.org",
            "@type": "ViewAction",
            "name": "View in Trello",
            "target": [
                "https://trello.com/c/1101/"
            ]
        }
    ]
  }
}

收据卡Receipt card

在团队中受支持。Supported in Teams.

使 bot 能够向用户提供收据的卡片。A card that enables a bot to provide a receipt to the user. 它通常包含要包含在收据、税和总计信息以及其他文本中的项的列表。It typically contains the list of items to include on the receipt, tax and total information, and other text.

对收据卡的支持Support for Receipts cards

团队中的 botBots in Teams 消息扩展Messaging Extensions 连接器Connectors Bot 框架Bot Framework

有关收据卡的详细信息For more information on Receipt cards

Bot 框架参考:Bot Framework reference:

登录卡片Signin card

使机器人能够请求用户登录的卡片。A card that enables a bot to request that a user sign in. 在与 Bot 框架中相比,在不同表单中的团队中支持。Supported in Teams in a slightly different form than is found in the Bot Framework. 团队中的登录卡片与 bot 框架中的登录卡片类似,但在团队登录卡仅支持两个操作时除外: signinopenUrlThe signin card in Teams is similar to the signin card in the bot framework with the exception that the signin card in Teams only supports two actions: signin and openUrl.

登录操作可用于团队中的任何卡片,而不仅仅是登录卡。The signin action can be used from any card in Teams, not just the signin card. 有关身份验证的详细信息,请参阅Microsoft 团队身份验证流的主题相关主题。See the topic Microsoft Teams authentication flow for bots for more details on authentication.

对登录卡的支持Support for Signin cards

团队中的 botBots in Teams 消息扩展Messaging Extensions 连接器Connectors Bot 框架Bot Framework

有关登录卡的详细信息For more information on Signin cards

Bot 框架参考:Bot Framework reference:

缩略图卡片Thumbnail card

通常包含单个缩略图图像、一个或多个按钮以及文本的卡片。A card that typically contains a single thumbnail image, one or more buttons, and text.

支持缩略图卡片Support for Thumbnail cards

团队中的 botBots in Teams 消息扩展Messaging Extensions 连接器Connectors Bot 框架Bot Framework

缩略图示例

缩略图卡的属性Properties of a Thumbnail card

属性Property 类型Type 说明Description
titletitle 格式文本 Rich text 卡片的标题。Title of the card. 最多2行;当前不支持的格式Maximum 2 lines; formatting not currently supported
字幕subtitle 格式文本 Rich text 卡片的副标题。Subtitle of the card. 最多2行;当前不支持的格式Maximum 2 lines; formatting not currently supported
texttext 格式文本 Rich text 文本显示在副标题的正下方;请参阅卡片格式设置选项Text appears just below the subtitle; see Card formatting for formatting options
图形images 图像数组Array of images 显示在卡片顶部的图像。Image displayed at top of card. 纵横比1:1 (方形)Aspect ratio 1:1 (square)
按钮buttons Action 对象的数组Array of action objects 适用于当前卡片的一组操作。Set of actions applicable to the current card. 最大6Maximum 6
即可tap Action 对象Action object 当用户点击卡片本身时,将激活此操作This action will be activated when the user taps on the card itself

缩略图示例卡片Example Thumbnail card

{
  "contentType": "application/vnd.microsoft.card.thumbnail",
  "content": {
    "title": "Bender",
    "subtitle": "tale of a robot who dared to love",
    "text": "Bender Bending Rodríguez is a main character in the animated television series Futurama. He was created by series creators Matt Groening and David X. Cohen, and is voiced by John DiMaggio",
    "images": [
      {
        "url": "https://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png",
        "alt": "Bender Rodríguez"
      }
    ],
    "buttons": [
      {
        "type": "imBack",
        "title": "Thumbs Up",
        "image": "http://moopz.com/assets_c/2012/06/emoji-thumbs-up-150-thumb-autox125-140616.jpg",
        "value": "I like it"
      },
      {
        "type": "imBack",
        "title": "Thumbs Down",
        "image": "http://yourfaceisstupid.com/wp-content/uploads/2014/08/thumbs-down.png",
        "value": "I don't like it"
      },
      {
        "type": "openUrl",
        "title": "I feel lucky",
        "image": "http://thumb9.shutterstock.com/photos/thumb_large/683806/148441982.jpg",
        "value": "https://www.bing.com/images/search?q=bender&qpvt=bender&qpvt=bender&qpvt=bender&FORM=IGRE"
      }
    ],
    "tap": {
      "type": "imBack",
      "value": "Tapped it!"
    }
  }
}

详细信息For more information

Bot 框架参考:Bot Framework reference:

卡片集合Card collections

团队中支持卡片集合。Card collections are supported in Teams.

卡集合由 Bot 框架(和)提供 builder.AttachmentLayout.carousel builder.AttachmentLayout.listCard collections are provided by the Bot Framework: builder.AttachmentLayout.carousel and builder.AttachmentLayout.list. 这些集合可以包含自适应、英雄或缩略图卡片。These collections can contain Adaptive, Hero, or Thumbnail cards.

轮播布局显示了卡片的轮播,也可以选择使用关联的动作按钮。The carousel layout shows a carousel of cards, optionally with associated action buttons.

团队中的 botBots in Teams 消息扩展Messaging Extensions 连接器Connectors Bot 框架Bot Framework

备注

每封邮件的轮播最多可显示10张卡片。A carousel can display a maximum of 10 cards per message.

卡片轮播的示例

属性与对英雄或缩略图卡片的属性相同。Properties are the same as for the hero or thumbnail card.

builder.AttachmentLayout.carousel

列表集合List collection

对列表集合的支持Support for List collections

列表布局显示垂直堆叠的卡片列表,可以选择使用关联的操作按钮。The list layout shows a vertically stacked list of cards, optionally with associated action buttons.

团队中的 botBots in Teams 消息扩展Messaging Extensions 连接器Connectors Bot 框架Bot Framework

示例列表集合Example List collection

卡片列表的示例

属性与对英雄或缩略图卡片的属性相同。Properties are the same as for the hero or thumbnail card.

列表最多可显示10个卡片(每封邮件)。A list can display a maximum of 10 cards per message.

备注

清单卡的某些组合在 iOS 和 Android 上尚不受支持。Some combinations of list cards are not yet supported on iOS and Android.

列表集合的语法Syntax for List collections

builder.AttachmentLayout.list

团队不支持的卡片Cards not supported in Teams

以下卡片由 Bot 框架实现,但团队不支持。The following cards are implemented by the Bot Framework, but are NOT supported by Teams.

  • 动画卡片Animation cards
  • 音频卡Audio cards
  • 视频卡Video cards