自适应卡片是 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 属性包含包含其上所有输入数据的对象。