在前端开发中，如何设计一个漂亮且高效的 UI 是非常重要的，而 Adaptive Cards 可以帮助开发者更快地创建漂亮的 UI。Microsoft Adaptive Cards 是一种开放式的协议，它可以用来表达并交换在多个平台上渲染的交互性的元素和数据。同时，为了更方便地使用这个协议，Microsoft 也提供了适用于多种编程语言的 SDK 和组件。
本篇教程将会介绍如何使用 npm 包 microsoft-adaptivecards 来创建一个 Adaptive Cards UI，并为读者详细解释其使用方法和原理，以及提供一些实际使用示例。
快速上手
在开始前，确保你已经安装了 Node.js 和 npm。
首先，在你的项目中安装 microsoft-adaptivecards 包：
npm install microsoft-adaptivecards
然后，在你的代码中引入 adaptivecards 以及它的工具 AdaptiveCard：
const adaptivecards = require("microsoft-adaptivecards");
const AdaptiveCard = adaptivecards.AdaptiveCard;现在，你可以创建一个新的 AdaptiveCard 实例，并使用其 addTextBlock() 方法添加一个文本块：
let card = new AdaptiveCard();
card.addTextBlock("Welcome to Adaptive Cards!");接下来，你需要创建一个 TextBlock 的 JSON 对象，将它传递给 card.addContent() 方法，并将它渲染到网页中：
-- -------------------- ---- -------
--- -------- - -
-------- -----------------------------------------------------
----- ---------------
-------- ------
----- -
-
----- ------------
----- -------- -- -------- -------
-
-
--
---------------------
---------------------------------------------------------这样，我们已经成功创建了一个 Adaptive Card UI！
组件介绍
在逐步深入使用 Adaptive Cards 前，让我们先来了解下其提供的组件。
- Adaptive Card：最核心的 Adaptive Cards 类，所有卡片的实例都是由
AdaptiveCard创建的。 - Card Elements：卡片元素，例如文本、图片、按钮等。
- Card Actions：卡片中的操作，例如打开一个链接或发起一个请求。
- Card Host Config：卡片宿主的配置，例如卡片在移动端和桌面端的样式配置不同。
- Card Designer：一个可视化的组件，在不写代码的情况下帮助你设计卡片。
了解了这些核心内容后，我们现在开始逐个介绍它们的用法。
创建 Adaptive Card 实例
如前所述，使用 Adaptive Cards 首先要创建一个 Adaptive Card 实例。在使用 microsoft-adaptivecards 包时，我们需要使用以下代码导入 Adaptive Card 类：
const adaptivecards = require("microsoft-adaptivecards");
const AdaptiveCard = adaptivecards.AdaptiveCard;然后，我们创建一个新的实例：
let card = new AdaptiveCard();
添加元素
接下来，我们将介绍如何向卡片中添加不同的元素。
TextBlock
let textBlock = new adaptivecards.TextBlock(); textBlock.text = "文本内容"; card.addItem(textBlock);
Image
let image = new adaptivecards.Image(); image.url = "https://picsum.photos/200"; card.addItem(image);
ColumnSet 和 Column
-- -------------------- ---- ------- --- --------- - --- -------------------------- --- ------- - --- ----------------------- ------------- - ------- ------------------- --------------------------------- --- ------- - --- ----------------------- ------------- - ---------- ------------------- --------------------------------- ----------------------------- ----------------------------- ------------------------
添加操作
使用操作可以让用户与卡片进行交互，从而更好地完成任务。下面介绍一些常用的操作类型。
Action.OpenUrl
let action = new adaptivecards.Action.OpenUrl(); action.title = "打开链接"; action.url = "https://www.microsoft.com/"; card.addAction(action);
Action.ShowCard
-- -------------------- ---- ------- --- ------ - --- -------------------------------- ------------ - -------- --- --------- - --- -------------------------- --------------------- - ------ --- -------------- - --- -------------------------- ---------------------------------- ----------- - --- ----------------------------- ------------------------------------ -----------------------
添加样式和主题
除了添加元素和操作，我们还可以使用宿主配置来添加样式和主题，以应对不同的交互场景。
添加样式
使用 microsoft-adaptivecards 包，我们可以按以下方式创建一个宿主配置：
-- -------------------- ---- -------
--- ---------- - --- --------------------------
-------- -
-------- ----
------ ----
------- ----
------ ----
--
---------- -
-------------- --
---------- ---------
--
----------- ------ ---
---可以看到，宿主配置的参数与它们的效果紧密相关。这里举几个例子：
spacing.default：默认间距，即所有元素的间距。spacing.small：卡片中元素间较小的间距。separator.lineThickness：分隔线的粗细。separator.lineColor：分隔线的颜色。fontFamily：字体。
然后，我们将宿主配置传递给 AdaptiveCard 实例：
let card = new AdaptiveCard(); card.hostConfig = hostConfig;
添加主题
除了样式，我们还可以添加主题。 microsoft-adaptivecards 包提供了一些构造函数，通常用于定义卡片的颜色或其他外观样式。
具体的语法可以参考官方文档，这里就举一个简单的例子展示如何使用：
let bgColor = new adaptivecards.BackgroundColor("#FF0000");实例化后，可以将它传递给元素：
let image = new adaptivecards.Image(); image.style = bgColor;
实际示例
下面提供一个完整的示例代码，用于构建一个包括文本、图片和操作的简单 Adaptive Card。
HTML
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- -------- ----- ------------
------- ------------------------------------------------------------------------------
----- ---------------- --------------- -----------------------------------------------------------------------
-------
------
---- ---------------
------- ------------------------
-------
-------JavaScript
-- -------------------- ---- -------
----- ------------- - -----------------------------------
----- ------------ - ---------------------------
--- ---- - --- ---------------
--- ----- - --- --------------------------
---------- - ---------- -------- ----- ------
------------ - ---------
--------------------
--- -------- - --- --------------------------
------------- - --------- ----- ----------------------------------------
--------------- - ----------
------------- - ---------
------------- - -----
-----------------------
--- ----- - --- ----------------------
--------- - --------------------------------
--------------------
--- ------ - --- -------------------------------
------------ - -------
---------- - ---------------------------
-----------------------
--- ---------- - --- --------------------------
-------- -
-------- ----
------ ----
------- ----
------ ----
--
----------- ------ ---
---
--------------- - -----------
--- -------- - --------------
---------------------
----------------------------------------------------------总结
本篇教程介绍了 Adaptive Cards 的使用方法和原理，并提供了一个实际示例。希望能够帮助读者更深入地了解 Adaptive Cards 的使用和优秀功能，同时也能让读者能够将其应用到自己的项目中，提升 UI 的效果和交互性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601781e8991b448de347