npm 包 microsoft-adaptivecards 使用教程

在前端开发中，如何设计一个漂亮且高效的 UI 是非常重要的，而 Adaptive Cards 可以帮助开发者更快地创建漂亮的 UI。Microsoft Adaptive Cards 是一种开放式的协议，它可以用来表达并交换在多个平台上渲染的交互性的元素和数据。同时，为了更方便地使用这个协议，Microsoft 也提供了适用于多种编程语言的 SDK 和组件。

本篇教程将会介绍如何使用 npm 包 microsoft-adaptivecards 来创建一个 Adaptive Cards UI，并为读者详细解释其使用方法和原理，以及提供一些实际使用示例。

快速上手

在开始前，确保你已经安装了 Node.js 和 npm。

首先，在你的项目中安装 microsoft-adaptivecards 包：

--- ------- -----------------------

然后，在你的代码中引入 adaptivecards 以及它的工具 AdaptiveCard：

----- ------------- - -----------------------------------
----- ------------ - ---------------------------

现在，你可以创建一个新的 AdaptiveCard 实例，并使用其 addTextBlock() 方法添加一个文本块：

--- ---- - --- ---------------

-------------------------- -- -------- ---------

接下来，你需要创建一个 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 类：

----- ------------- - -----------------------------------
----- ------------ - ---------------------------

然后，我们创建一个新的实例：

--- ---- - --- ---------------

添加元素

接下来，我们将介绍如何向卡片中添加不同的元素。

TextBlock

--- --------- - --- --------------------------
-------------- - -------
------------------------

Image

--- ----- - --- ----------------------
--------- - ----------------------------
--------------------

ColumnSet 和 Column

--- --------- - --- --------------------------
--- ------- - --- -----------------------
------------- - -------
------------------- ---------------------------------
--- ------- - --- -----------------------
------------- - ----------
------------------- ---------------------------------
-----------------------------
-----------------------------
------------------------

添加操作

使用操作可以让用户与卡片进行交互，从而更好地完成任务。下面介绍一些常用的操作类型。

Action.OpenUrl

--- ------ - --- -------------------------------
------------ - -------
---------- - -----------------------------
-----------------------

Action.ShowCard

--- ------ - --- --------------------------------
------------ - --------
--- --------- - --- --------------------------
--------------------- - ------
--- -------------- - --- --------------------------
----------------------------------
----------- - --- -----------------------------
------------------------------------
-----------------------

添加样式和主题

除了添加元素和操作，我们还可以使用宿主配置来添加样式和主题，以应对不同的交互场景。

添加样式

使用 microsoft-adaptivecards 包，我们可以按以下方式创建一个宿主配置：

--- ---------- - --- --------------------------
    -------- -
        -------- ----
        ------ ----
        ------- ----
        ------ ----
    --
    ---------- -
        -------------- --
        ---------- ---------
    --
    ----------- ------ ---
---

可以看到，宿主配置的参数与它们的效果紧密相关。这里举几个例子：

  • spacing.default：默认间距，即所有元素的间距。
  • spacing.small：卡片中元素间较小的间距。
  • separator.lineThickness：分隔线的粗细。
  • separator.lineColor：分隔线的颜色。
  • fontFamily：字体。

然后，我们将宿主配置传递给 AdaptiveCard 实例：

--- ---- - --- ---------------
--------------- - -----------

添加主题

除了样式，我们还可以添加主题。 microsoft-adaptivecards 包提供了一些构造函数，通常用于定义卡片的颜色或其他外观样式。

具体的语法可以参考官方文档，这里就举一个简单的例子展示如何使用：

--- ------- - --- -----------------------------------------

实例化后，可以将它传递给元素：

--- ----- - --- ----------------------
----------- - --------

实际示例

下面提供一个完整的示例代码，用于构建一个包括文本、图片和操作的简单 Adaptive Card。

HTML

--------- -----
------
------
    ----- ----------------
    ---------------- -------- ----- ------------
    ------- ------------------------------------------------------------------------------
    ----- ---------------- --------------- -----------------------------------------------------------------------
-------
------
    ---- ---------------
    ------- ------------------------
-------
-------

JavaScript

----- ------------- - -----------------------------------
----- ------------ - ---------------------------

--- ---- - --- ---------------

--- ----- - --- --------------------------
---------- - ---------- -------- ----- ------
------------ - ---------
--------------------

--- -------- - --- --------------------------
------------- - --------- ----- ----------------------------------------
--------------- - ----------
------------- - ---------
------------- - -----
-----------------------

--- ----- - --- ----------------------
--------- - --------------------------------
--------------------

--- ------ - --- -------------------------------
------------ - -------
---------- - ---------------------------
-----------------------

--- ---------- - --- --------------------------
    -------- -
        -------- ----
        ------ ----
        ------- ----
        ------ ----
    --
    ----------- ------ ---
---

--------------- - -----------

--- -------- - --------------

---------------------
----------------------------------------------------------

总结

本篇教程介绍了 Adaptive Cards 的使用方法和原理，并提供了一个实际示例。希望能够帮助读者更深入地了解 Adaptive Cards 的使用和优秀功能，同时也能让读者能够将其应用到自己的项目中，提升 UI 的效果和交互性。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005601781e8991b448de347

阅读全文

猜你喜欢

  • npm 包 k-kits 使用教程

    简介 k-kits 是一个针对前端开发的 npm 包，它包含了常用的工具集，使用 k-kits 可以轻松地实现诸如日期格式化、颜色转换、数据验证等常见的功能。 本文将为大家详细介绍如何使用 k-kit...

    3 年前
  • npm 包 cchm-los 使用教程

    介绍 cchm-los 是一个 npm 包，它是一个轻量级的本地存储库，用于在前端应用程序中存储和检索数据。它支持 key/value 的存储，并提供了一些有用的方法来操作存储的数据。

    3 年前
  • npm 包 wxpage-cli 使用教程

    简介 微信小程序是一种轻量级的应用程序，受到了很多开发者的关注。作为前端开发者，我们需要为小程序编写代码，并把它发布到微信平台上。在这个过程中，我们可能需要一些工具来帮助我们提高开发效率。

    3 年前
  • npm 包 @panosvoudouris/storybook-addon-blabbr 使用教程

    介绍 @panosvoudouris/storybook-addon-blabbr 是一个 Storybook 的插件，它可以让你在编写组件时，快速提交带有评论的屏幕截图到 Blabbr.app，方便...

    3 年前
  • npm 包 airman 使用教程

    前言 在前端开发中，许多常用的功能往往需要借助一些工具或者库来实现。npm 的众多包拓展了前端开发的功能的实现，而其中有一个非常实用的包，叫做 airman。 airman 是一个强大的 npm 包，...

    3 年前
  • npm 包 b-antd 使用教程

    概述 b-antd 是一个轻量级的前端 UI 库，基于 Antd 和 Vue.js。它提供了一系列的 UI 组件和工具，以帮助开发者快速构建高质量的前端应用程序。 在本篇文章中，我们将详细介绍 b-a...

    3 年前
  • npm包drivetech-icons使用教程

    在前端开发中，常常需要使用各种图标来进行界面设计。而drivetech-icons是一个优秀的图标库，提供了一系列矢量图标，可以根据业务需求进行选择和使用。为了方便使用，drivetech-icons...

    3 年前
  • npm 包 node-red-contrib-pi-omxplayer 使用教程

    前言 node-red-contrib-pi-omxplayer 是一款适用于树莓派的 npm 包，它可以让我们在 node-red 中轻松地使用 omxplayer 播放视频。

    3 年前
  • npm 包 react-autosuggest-fix-ios-scroll-issue 使用教程

    在前端领域，React 是一种非常流行的开发框架，而自动补全组件是实现自动提示搜索的一种非常实用的技术。不过，在特定情况下，在 iOS 设备上自动补全组件可能会遇到滚动问题。

    3 年前
  • npm 包 vexflow-music 使用教程

    介绍 vexflow-music 是一个基于 VexFlow 的 npm 包。VexFlow 是一个支持创建支持 JavaScript 单页应用的乐谱库。vexflow-music 完全基于 VexF...

    3 年前
  • npm 包 ember-flexberry-gis-csw 使用教程

    简介 ember-flexberry-gis-csw 是一个能够帮助你在 Ember.js 框架中使用 OGC 服务（如 CSW 服务）的插件。本插件基于 ember-flexberry-gis 库，...

    3 年前
  • npm 包 taxcloudjs 使用教程

    当我们在开发电商网站时，处理税率问题常常是一个头疼的问题。而 TaxCloud 就提供了一种可靠和简单的方式来处理税率计算问题。在这篇文章中，我将向大家介绍如何使用 npm 包 taxcloudjs ...

    3 年前
  • npm 包 graphql-auto-mutation 使用教程

    前言 GraphQL 是一种优秀的 API 查询语言，它具有强类型的定义和高效的数据传输。而graphql-auto-mutation就是一个基于GraphQL语言的自动化变异器，它提供了一种简单快捷...

    3 年前
  • npm包 native-md5 使用教程

    简介 native-md5 是一个基于 Javascript 的npm包，用于快速生成字符串的MD5校验值。相比其他 MD5 库，native-md5更快，因为它是用纯 JavaScript 实现的。

    3 年前
  • npm 包 matias2588-drag-drop 使用教程

    在前端开发过程中，经常需要实现拖拽组件，让页面更加互动，用户体验更加优秀。其中， npm 包 matias2588-drag-drop 是一个非常好用的工具，简单易上手，本文将为大家介绍如何使用。

    3 年前
  • npm 包 @numminorihsf/json2csv 使用教程

    在前端开发中我们经常需要将 JSON 数据转换为 CSV 文件进行导出，而 @numminorihsf/json2csv 是一款非常好用的 npm 包，它可以快速将 JSON 转换为 CSV 格式，节...

    3 年前
  • npm 包 @softplan/react-paginate 使用教程

    前言 随着现在前端开发越来越依赖于库和框架，所以 npm 包的使用也越来越方便和必不可少了。而本文将介绍一个个人感觉非常好用的 npm 包 @softplan/react-paginate，这是一个在...

    3 年前
  • npm 包 futura-dom 使用教程

    前端开发中，我们需要使用各种工具和库来辅助我们完成更好的网页效果或者交互。futura-dom 是一个轻量、快速的 JavaScript 库，它提供了一些常用的 DOM 操作，使我们能够更轻松地处理用...

    3 年前
  • npm 包 bootstrap-jalali-datepicker 使用教程

    前言 日期选择器在 Web 开发中是十分常见的组件。在多数情况下，我们使用的是 Gregorian（公历）日历，但在某些场景下，需要使用别的日历类型。比如在中东地区，使用的是 Jalali（波斯历）日...

    3 年前
  • npm 包 flotta-sdk 使用教程

    介绍 flotta-sdk 是一个 JavaScript 版的浏览器和 Node.js 客户端库，提供针对 Flotta API 的接口。此文档介绍如何安装和使用该 npm 包。

    3 年前

相关推荐

    暂无文章