共用方式為


快速入門

調適型卡片是 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 屬性,用以識別其所屬的物件種類。 查看上述卡片時,您可以看到我們有兩個元素,即 TextBlockImage

調適型卡片會垂直堆疊,並展開至其父系的寬度 (設想 HTML 中的 display: block)。 不過,您可以使用 ColumnSet 來建立容器的並排顯示欄位。

調適型元素

最基本的元素是:

  • TextBlock - 新增具有屬性的文字區塊,以控制文字的外觀
  • Image - 新增具有屬性的影像,以控制影像的外觀

容器元素

卡片也可以有容器,用以排列子元素集合。

  • Container - 定義元素集合
  • 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 會透過 Value 屬性將 Bot Framework Bot 活動傳回給 Bot;該屬性中包含承載了所有輸入資料的物件。

深入了解