入门

自适应卡片是 JSON 序列化的卡片对象模型。

自适应卡片结构

卡片的基础结构如下:

  • AdaptiveCard - 根对象描述了AdaptiveCard本身,包括其元素构成、其操作、其语音呈现方式以及呈现此卡片所需的架构版本。
  • body - 卡片的正文由称为 elements“构建基块”组成。 几乎可以对元素进行无限的排列组合来创建各种各样的卡片。
  • actions - 许多卡片都有一组用户可执行的操作。 此属性描述那些通常在底部“操作栏”中呈现的操作。

示例卡片

此示例卡片包含一行文本,之后是一个图像。

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here is a ninja cat"
        },
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/cats/1.png"
        }
    ]
}

Type 属性

每个元素都有一个 type 属性,用于标识它的对象类型。 查看此卡片,可以看到我们有两个元素,一个 TextBlock 和一个 Image

所有自适应卡片元素 垂直堆叠扩展到其父元素的宽度(可以参考 HTML 中的 display: block)。 但是,可以使用一个ColumnSet来创建并排的容器列。

自适应元素

最基本的元素包括:

  • TextBlock - 添加一个包含属性的文本块,以控制文本的外观
  • 图像 - 添加具有属性的图像,以控制图像的外观

容器元素

卡片还可以包含用于排列子元素集合的容器。

  • 容器 - 定义元素集合
  • ColumnSet/Column - 定义列的集合,每个列都是容器
  • FactSet - 数据集容器
  • ImageSet - 图像的容器,以便 UI 可以为图像集合提供合适的照片相册体验。

输入元素

输入元素允许你要求本机 UI 生成简单表单:

  • Input.Text - 从用户获取文本内容
  • Input.Date - 从用户获取日期
  • Input.Time - 获取用户输入的时间
  • Input.Number - 从用户输入中获取数字
  • Input.ChoiceSet - 为用户提供一组选项,并让他们选择
  • Input.Toggle - 为用户提供两个项目之间的单一选择,并让他们选择

行动

操作将按钮添加到卡片。 这些操作可以执行各种操作,例如打开 URL 或提交某些信息。

  • Action.OpenUrl - 按钮将打开外部 URL 进行查看
  • Action.ShowCard - 请求向用户显示子卡。
  • Action.Submit - 要求将所有输入元素收集到一个对象中,然后通过主机应用程序定义的一些方法发送给你。

示例 Action.Submit:使用 Skype,Action.Submit 会将 Bot Framework 机器人活动发送回机器人,该机器人的 Value 属性包含包含其上所有输入数据的对象。

了解详细信息