lomkju-adaptivecards 是一个基于 Node.js 平台的开源 npm 包，它提供了一种非常方便的方式来轻松创建自适应卡片。自适应卡片是一种灵活、可重用和易于构建的卡片，它可用于多个场景，包括聊天机器人、邮件等。
本篇文章将介绍 lomkju-adaptivecards 的基本使用方法，包括安装、构建和配置，以及使用示例。我们将以详细和深入的方式介绍这些内容，帮助读者了解如何使用 lomkju-adaptivecards 来创建自适应卡片。
安装
要安装 lomkju-adaptivecards，我们需要首先安装 Node.js，然后在命令行中使用 npm 安装 lomkju-adaptivecards。可以使用以下命令完成安装：
npm install lomkju-adaptivecards
这将在您的本地计算机上安装最新版本的 lomkju-adaptivecards。
构建
安装完成后，我们可以通过以下方式构建自适应卡片：
-- -------------------- ---- -------
----- ------ - ------------------------------------
----- ---- - -
------ ------- --------
--
----- -------- - --- -----------------
-------- -----------------------------------------------------
----- ---------------
-------- ------
----- -
-
----- ------------
----- ---- ----- -- ----------
--
--
---
----- ---- - -----------------
------ -----
---
------------------这段代码使用 lomkju-adaptivecards 创建了一个自适应卡片，并将其数据与模板合并。该代码使用 AdaptiveCards-Templating 包中的模板。模板以 JSON 格式表示卡片的外观和行为，并使用 $ {…} 语法表示要在卡片中使用的数据。
在这个例子中，我们创建了一个只包含一个文本块（TextBlock）的自适应卡片。其中的 text 属性使用 ${…} 语法表示我们希望在卡片中使用数据的标题。expand 方法会将数据与模板合并，并返回实际的卡片。
配置
除了创建和构建自适应卡片之外，我们还可以使用 lomkju-adaptivecards 来配置一些基本设置。以下是一些可用的设置。
禁用卡片元素
我们可以使用 showCard 可选参数来禁用卡片元素。
-- -------------------- ---- -------
----- ------ - ------------------------------------
----- ---- - -
------ ------- --------
--------- ------
--
----- -------- - --- -----------------
-------- -----------------------------------------------------
----- ---------------
-------- ------
----- -
-
----- ------------
----- ---- ----- -- ----------
--
-
----- ------------
--- -------------
------ -
-
----- ------------
----- ----- -- - ----- ---------
--
--
---------- --------------
--
--
---
----- ---- - -----------------
------ -----
---
------------------在这个例子中，我们使用 isVisible 属性设置 showCard 值。isVisible 属性表示根据数据中的值是否展示容器元素。
自定义样式
我们可以使用 ACData.HostConfig 类来自定义自适应卡片的样式。
-- -------------------- ---- -------
----- ------ - ------------------------------------
----- ---- - -
------ ------- --------
--------- ------
--
----- ---------- - --- -------------------
-------- -
------ --
-------- ---
------- ---
------ ---
----------- ---
-------- ---
--
---------- -
-------------- --
---------- ----------
--
----------- ------ ----
---------- -
------ ---
-------- ---
------- ---
------ ---
----------- ---
--
---
----- -------- - --- -----------------
-------- -----------------------------------------------------
----- ---------------
-------- ------
----- -
-
----- ------------
----- ---- ----- -- ----------
--
--
---
------------------- - -----------
----- ---- - -----------------
------ -----
---
------------------在这个例子中，我们使用了 ACData.HostConfig 类来自定义自适应卡片的样式。我们设置了间距、分隔符颜色和字体等等。之后将这个配置文件设置为模板、别忘了使用“.”调用属性。最后将数据与模板合并，得到实际的卡片。
包含按钮
我们可以使用按钮元素来包含操作信息。
-- -------------------- ---- -------
----- ------ - ------------------------------------
----- ---- - -
------ ------- --------
--------- ------
--
----- -------- - --- -----------------
-------- -----------------------------------------------------
----- ---------------
-------- ------
----- -
-
----- ------------
----- ---- ----- -- ----------
--
--
-------- -
-
----- -----------------
------ ------ ------
---- ---------------------------
--
--
---
----- ---- - -----------------
------ -----
---
------------------在这个例子中，我们使用 actions 可选参数来添加按钮元素。OpenUrl 指定了按钮的类型，title 显示在按钮上，url 是按钮指向的网站。
示例
以下是一个完整且详细的示例，展示了如何使用 lomkju-adaptivecards 来创建自适应卡片。
-- -------------------- ---- -------
----- ------ - ------------------------------------
----- ---------- - --- -------------------
-------- -
------ --
-------- ---
------- ---
------ ---
----------- ---
-------- ---
--
---------- -
-------------- --
---------- ----------
--
----------- ------ ----
---------- -
------ ---
-------- ---
------- ---
------ ---
----------- ---
--
---
----- -------- - --- -----------------
-------- -----------------------------------------------------
----- ---------------
-------- ------
----- -
-
----- ------------
----- ----- -------------
------- ---------
----- ---------
--
-
----- ------------
---------- -----
------ -
-
----- ------------
-------- -
-
----- ---------
------ -------
------ -
-
----- --------
---- ------------------------------------------------
----- --------
--
--
--
-
----- ---------
------ ----------
------ -
-
----- ------------
----- --------------- ------------- ---------
------- ---------
----- -----
--
-
----- ------------
----- ------- ----- ---- ----
-------- -------
--
--
--
-
----- ---------
------ -------
------ -
-
----- ------------
----- -------
------- ---------
--
-
----- ------------
----- ------
------- ---------
------ ---------
----- --------
--
--
------------------------- ---------
--
--
--
--
--
-
----- ------------
---------- -----
------ -
-
----- ------------
----- -------------
------- ---------
--
-
----- ------------
----- ------ -----
---------- -----
--
-
----- ------------
----- ------- ----------
-------- -------
---------- -----
--
-
----- ------------
----- ----- --------
-------- -------
---------- -----
--
--
--
--
-------- -
-
----- -----------------
------ ----- -- ---- ------
---- ------------------------
--
--
---
------------------- - -----------
----- -------- - -
-------- -----------------------------------------------------
----- ---------------
-------- ------
----- -
-
----- ------------
----- ----- -------------
------- ---------
----- ---------
--
-
----- ------------
---------- -----
------ -
-
----- ------------
-------- -
-
----- ---------
------ -------
------ -
-
----- --------
---- ------------------------------------------------
----- --------
--
--
--
-
----- ---------
------ ----------
------ -
-
----- ------------
----- --------------- ------------- ---------
------- ---------
----- -----
--
-
----- ------------
----- ------- ----- ---- ----
-------- -------
--
--
--
-
----- ---------
------ -------
------ -
-
----- ------------
----- -------
------- ---------
--
-
----- ------------
----- ------
------- ---------
------ ---------
----- --------
--
--
------------------------- ---------
--
--
--
--
--
-
----- ------------
---------- -----
------ -
-
----- ------------
----- -------------
------- ---------
--
-
----- ------------
----- ------ -----
---------- -----
--
-
----- ------------
----- ------- ----------
-------- -------
---------- -----
--
-
----- ------------
----- ----- --------
-------- -------
---------- -----
--
--
--
--
-------- -
-
----- -----------------
------ ----- -- ---- ------
---- ------------------------
--
--
--
----- ---- - ----------------- ------ -------- ---
------------------在这个例子中，我们使用模板来创建自适应卡片，并使用数据填充实际信息。示例中的卡片包括标题、乘客信息和一个“查看在 Bing 地图中”的按钮。
结论
lomkju-adaptivecards 是一个出色的 npm 包，它提供了一种非常方便的方式来轻松创建自适应卡片。本文提供了基本的使用方式、具体的配置参数，以及一个详细的示例。在理解这些内容之后，您应该能够使用 lomkju-adaptivecards 创建完整的自适应卡片，并构建和调整卡片的外观和行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573f781e8991b448e9d47