使用 bm-ng2-tour npm 包创建引导式教程

在前端开发中，经常需要为用户提供引导式教程来演示界面的功能和操作流程。在 Angular 2+ 的开发中，有一个 npm 包叫做 bm-ng2-tour，它为我们提供了一个可以自定义样式、内容和组件的引导式教程组件。

本文将介绍如何使用 bm-ng2-tour 包来为 Angular 应用创建引导式教程，包括基本的用法和一些高级特性。

安装和配置 bm-ng2-tour

首先，我们需要在我们的 Angular 2+ 项目中安装 bm-ng2-tour。使用以下命令可以安装它：

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

然后，我们需要将 bm-ng2-tour 的模块引入到我们的 Angular 2+ 的模块中。在 app.module.ts 中添加以下代码：

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

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

使用 forRoot() 方法可以为服务提供一个全局唯一的实例。我们还需要在样式表中添加以下 CSS，以便在引导式教程中使用这些样式：

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

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

基本用法

现在我们已经完成了 bm-ng2-tour 的基本配置，接下来，让我们看一下如何使用它创建引导式教程。以下是一个简单的使用示例：

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

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

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

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

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

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

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

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

我们首先导入了所有需要的包和服务，然后在组件中创建了一个页面布局，其中包含三个不同的元素。在组件类中，我们创建了一个名为 tourConfig 的数组，它是一个包含引导式教程步骤的配置数组。

然后，我们使用 TourService 的实例在 startTour() 方法中初始化了教程，并在点击“Start Tour”按钮时启动了它。当用户点击“End Tour”按钮时，该教程将结束。

在 tourConfig 数组中的每一个对象都代表了一个教程步骤。在这些对象中，我们可以定义标题、选择器、内容和按钮文本等属性。具体来讲，我们可以使用以下属性：

  • title: 步骤标题
  • selector: 元素选择器，指示该步骤对应的 DOM 元素
  • content: 此步骤的内容
  • nextBtnText: 下一个按钮的文本
  • prevBtnText: 上一个按钮的文本
  • endBtnText: 结束按钮的文本
  • placement: 弹出框显示的位置

我们可以在 tourConfig 数组中提供多个步骤，bm-ng2-tour 将自动切换到下一个步骤，并显示引导式教程的进度条。

bm-ng2-tour 还为我们提供了其他一些有用的 API，例如当前步骤、前一个步骤和后一个步骤、判断教程是否还有下一个步骤等。这些方法和属性使得我们可以很容易地根据当前步骤来自定义步骤的表现和行为。

高级特性

除了基本用法之外，bm-ng2-tour 还提供了一些高级特性，例如：

自定义模板

bm-ng2-tour 允许我们使用自定义模板来自定义引导式教程的外观和功能。我们可以通过修改模板文件中的 HTML 结构来实现自定义。以下是一个自定义模板的示例：

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

此模板使用 CSS 类来设计教程面板，并自定义按钮的外观和行为。

对于这种自定义模板，我们需要将 bm-ng2-tour 的样式文件设为“scope（局部样式）”，这样才能顺利地应用我们自己的样式。这一点可以通过在父级组件或父级样式表中添加以下 CSS 代码来实现：

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

该代码将应用级别 CSS 的优先级设为低于当前选定元素中使用的样式，使我们可以轻松地自定义样式。

扫描所有 DOM 元素

默认情况下，bm-ng2-tour 只扫描与选择器匹配的第一个 DOM 元素，如果需要扫描和显示多个元素，我们需要设置 multiStep 属性为 true，如下所示：

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

这将在一次引导式教程中显示与选择器匹配的所有元素。

在组件中使用

而不是在模板中使用样式和模板传送门，我们还可以在组件代码中直接使用教程模块。以下是一个在组件中使用 bm-ng2-tour 的示例：

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

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

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

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

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

在这个示例中，我们可以在组件中使用 ViewChild 装饰器来获取步骤元素，并将其添加到数组中作为 tourConfig 对象的选择器属性。然后，我们使用 ngOnInit() 方法中的 TourService 实例来初始化引导式教程。

总结

在本文中，我们介绍了如何使用 bm-ng2-tour npm 包来为 Angular 应用创建引导式教程。我们展示了基本用法和一些高级特性，例如自定义模板、扫描所有 DOM 元素和在组件中使用，以及其他有用的 API 方法和属性。

引导式教程可以在用户学会和了解应用程序的工作原理的同时帮助他们更快地上手。使用 bm-ng2-tour，我们可以轻松地为 Angular 2+ 应用中的某些特定元素制作漂亮的引导式教程。

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

阅读全文

猜你喜欢

  • npm 包 pagenodes-nodes 使用教程

    前言 pagenodes-nodes 是一个用于 Node-RED 的 npm 包，提供了一系列新的节点，用于扩展 Node-RED 的能力。本文将介绍如何使用 pagenodes-nodes 这个 ...

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

    在前端开发中，经常需要使用各种工具来提高开发效率和代码质量。而 npm 是前端开发中使用最广泛的包管理器，可以方便地获取和管理各种第三方包。而 injoy-cli 就是一款基于 npm 的前端开发工具...

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

    前言 在前端开发中，我们经常会遇到一些重复性的工作，例如 css 命名、代码格式化等等。如果能够自动化处理这些事情，就能够提高工作效率和代码质量。在这里，我要介绍一个 npm 包——varx-cli，...

    3 年前
  • npm 包 windseek 使用教程

    简介 Windseek 是一款用于前端开发的工具类库，可以对风力值进行计算，并可根据风力值给出相应的风力标识。它是一款基于 npm 包管理工具进行开发和维护的面向开发者的工具，可以大大提高前端开发的效...

    3 年前
  • npm 包 vue-pagination-y 使用教程

    前言 在开发 Web 应用程序时，分页功能是非常基础的功能。但是，实现一个好的分页功能并不容易。vue-pagination-y 是一个非常好用的分页组件，它使用 Vue.js 框架开发，可以轻松地在...

    3 年前
  • npm 包 @sparkdev/puzzle-framework 使用教程

    简介 在前端开发中，使用框架可以大大提高开发效率和代码质量。@sparkdev/puzzle-framework 是一个基于 Vue.js 的前端框架，旨在帮助开发者快速构建高质量的 Web 应用程序...

    3 年前
  • npm 包 modal-1k 使用教程

    1. 什么是 modal-1k modal-1k 是一个轻量级的 JavaScript 库，用于在网页上创建具有交互性的模态框。它具有以下特点： 体积只有 1 KB 左右，非常适合前端开发者在项目中...

    3 年前
  • npm 包 react-artist 使用教程

    什么是 react-artist？ React-artist 是一个基于 React 的 SVG 图形库，它提供了一系列简单易用的组件和规则，以帮助开发人员在应用中绘制高质量的 SVG 图形。

    3 年前
  • npm包react-artist-canvas使用教程

    React-artist-canvas是一种用于React应用程序的可扩展和灵活的艺术画布，它允许你创建自定义图形，动画和效果。本文将介绍如何使用react-artist-canvas，并提供一些示例...

    3 年前
  • npm 包 naruto-names 使用教程

    在前端开发中，我们经常需要生成一些测试数据。比如，在一个名为“忍者村”的应用中，我们可能需要生成一些随机的忍者名字。此时，我们可以使用一个 npm 包叫做 naruto-names。

    3 年前
  • npm 包 ozutarifa-api 使用教程

    ozutarifa-api 是一款功能强大的 npm 包，它可以用来处理和管理条目和列表数据。该包提供了多种方法和工具，可以轻松地创建、更新、删除和查询条目和列表数据。

    3 年前
  • npm 包 react-artist-helpers 使用教程

    前言 在 React 应用开发中，我们经常会涉及到界面布局，其中很多布局特效需要用到一些便捷的样式操作方法。而这些方法恰好可以通过使用 npm 包 react-artist-helpers 来完成。

    3 年前
  • npm 包 react-cs 使用教程

    在现代化的前端开发中，React 是当之无愧的前端框架之一，而 npm 是前端包管理和构建的标准。在这两个基础上，React 社区为开发者贡献了丰富的插件库，包括用于构建动画组件的 react-cs。

    3 年前
  • npm 包 fsl 使用教程

    fsl (File System Locker) 是一个可以用来对文件进行加密、解密和签名的 npm 包。它源于一个在实际开发中的需求，即希望能够在不泄露敏感信息和重要文件的情况下，对文件进行安全传输...

    3 年前
  • npm 包 goita-core 使用教程

    在前端开发中，有很多常用的 npm 包可以使用，比如常用的 jQuery、React 等，但是除此之外，还存在一些比较冷门但是非常实用的 npm 包。本文介绍其中一个叫做 goita-core 的 n...

    3 年前
  • npm 包 stalkr-api 使用教程

    在现代的前端开发过程中，npm 是一个必不可少的工具，它为开发者提供了方便的包管理工具。stalkr-api 是一个在 npm 上发布的 npm 包，它提供了一个非常便捷的方法来使用 Stalkr 的...

    3 年前
  • npm 包 typhonjs-color-logger 使用教程

    在前端开发过程中，经常需要记录日志方便调试和排错。但是，简单的console.log()输出不够直观和易读，不能满足开发人员的需求。因此，使用npm包typhonjs-color-logger可以帮助...

    3 年前
  • npm 包 generator-node-vue-admin 使用教程

    在前端开发中，有很多需要自己写的模板代码，如登录注册页面、后台管理页面等。这些模板代码虽然重要，但无论是从设计还是开发的角度来看，都是非常耗时的。为了解决这个问题，我们可以使用一个名为 generat...

    3 年前
  • npm包uuid-with-v6使用教程

    简介 uuid-with-v6是一个Node.js的npm包，它是基于UUID版本6生成唯一标识符的实现。UUID（通用唯一标识符）是一种标准，它对生成的标识符有一些约束，使其有着足够的随机性和唯一性...

    3 年前
  • npm 包 api-client-node 使用教程

    在前端开发中，我们经常需要通过后端提供的 API 接口获取数据或者操作数据库。随着前后端分离的流行，前端工程师需要熟练掌握如何使用 API 来处理数据。而 api-client-node 是一款适用于...

    3 年前

相关推荐

    暂无文章