共用方式為

使用者入門

調適型卡片是 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 Bot 活動傳送回 Bot，其 Value 屬性包含其上所有輸入數據的物件。

瞭解更多資訊

  • Last updated on