npm 包 angular2-wizard-mognedy 使用教程

angular2-wizard-mognedy 是一个基于 Angular 2 的向导组件，可以帮助开发者在 Web 应用中实现步骤导航的功能。其提供了多种形式的页面导航，包括单独显示或内嵌显示，跨组件导航等。本文将详细介绍 angular2-wizard-mognedy 的使用方法，以及给出示例代码作为参考。

安装

为方便使用，建议使用 npm 包管理工具进行安装。

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

集成

使用 angular2-wizard-mognedy 需要在项目中添加它的模块。

Step 1

在 app.module.ts 中导入 angular2-wizard-mognedy 模块。

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

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

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

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

Step 2

使用 ng-wizard 标签包裹导航条，使用 ng-wizard-step 标签包裹步骤页面。

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

Step 3

使用 app.component.ts 中的代码初始化向导组件。

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

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

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

API

ng-wizard

名称 类型 默认值 描述
navBar boolean true 是否显示导航条
navBarClass string 'wizard-tabs' 导航条的 CSS 样式类
showStepNumber boolean true 是否在导航条上显示步骤编号

ng-wizard-step

名称 类型 默认值 描述
stepTitle string '' 步骤标题
[stepId] string uuid() 步骤 ID (如果不指定，则使用自动生成的 UUID)
[canEnter] Function null 当用户尝试进入该步骤时要运行的函数
[canExit] Function null 当用户尝试离开该步骤时要运行的函数

示例

在 GitHub 上克隆本文的示例代码，并通过以下步骤安装依赖并运行项目。

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

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

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

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

打开浏览器，输入 http://localhost:4200 即可看到示例。

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

阅读全文

猜你喜欢

  • npm包：ace-editor-on-vue的使用教程

    在前端开发中，代码编辑器是一个必不可少的工具，它有助于程序员更快速、高效地完成代码编写。我们今天要介绍的npm包——ace-editor-on-vue，是一个集成了Ace编辑器的Vue组件。

    3 年前
  • npm 包 bootstrap-table-fixed-columns-pro 使用教程

    Bootstrap 是一个流行的前端框架，提供了众多的组件，便于前端开发人员快速搭建页面。在 Bootstrap 的基础上，bootstrap-table 是一款开源的表格插件，提供了强大的数据展示和...

    3 年前
  • npm 包 polymer-css-loader 使用教程

    在现代前端开发中，前端开发人员经常使用不同的框架和库来构建复杂的应用程序。其中，Polymer 是一个基于 Web 组件的库，为开发人员提供了自定义组件的能力。Polymer-css-loader 是...

    3 年前
  • npm 包 win-proc-info 使用教程

    在前端开发中，我们经常需要获取计算机的一些进程信息。如果是在 Windows 操作系统中，我们可以使用一个 npm 包，叫做 win-proc-info，来完成这个任务。

    3 年前
  • npm包 kintuba的使用教程

    在前端开发中，我们经常需要处理数据的格式转换和处理。kintuba是一款十分优秀的npm包，提供了方便的数据格式转换和处理的工具函数。本篇文章将会详细介绍kintuba的使用方法，希望能够帮助大家更加...

    3 年前
  • npm 包 react-native-smart-notif-panel 使用教程

    介绍 react-native-smart-notif-panel 是一个 React Native 的 npm 包，可以用于生成自定义的信息面板。该面板可以作为通知面板，消息列表或者其他需要显示多个...

    3 年前
  • npm 包 @dino115/draft-js-markdown-plugin 使用教程

    在前端开发过程中，我们经常需要寻找适合自己项目的 npm 包来提高开发效率，其中 @dino115/draft-js-markdown-plugin 是一款非常实用的 npm 包，其可以将 draft...

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

    simplest-datepicker 是一个基于 JavaScript 的日期选择器库。使用 npm 包可以很方便地将其集成到你的项目中。 本文将介绍如何使用 simplest-datepicker...

    3 年前
  • npm 包 kin-pm2-start 使用教程

    在前端的开发中，我们经常会用到 pm2 进行 Node.js 进程的管理和部署。然而，使用起来会有一定的复杂度和难度。在这种情况下，npm 包 kin-pm2-start 就应运而生了。

    3 年前
  • npm 包 vue2-num-keyboard 使用教程

    vue2-num-keyboard 是一个用于 Vue.js 的数字键盘组件，它可以帮助您在移动端页面中更方便地输入数字。本文将为您详细介绍如何使用该组件，包括安装、使用、选项、事件等方面的内容。

    3 年前
  • npm 包 @nwx/gtag 使用教程

    在网站开发中，我们经常需要引入 Google Analytics 或其他分析工具来追踪网站的流量和行为，以便更好地进行数据分析和优化。而 @nwx/gtag 就是一个能够帮助我们快速接入 Google...

    3 年前
  • npm 包 allex_staticservicecontainerlib 使用教程

    在前端开发中，经常会用到一些外部的库来实现各种功能。npm 是一个非常流行的 JavaScript 包管理工具，我们可以通过 npm 安装各种各样的库来提高开发效率。

    3 年前
  • npm包generator-pln使用教程

    什么是generator-pln generator-pln是一个用于自动化生成 Web 应用程序的工具，它是 Yeoman 的生成器之一。Yeoman 是基于 Node.js 的自动化工具，集成了很...

    3 年前
  • npm 包 react-native-slider-zdev 使用教程

    前言 React Native 是一种基于 JavaScript 的跨平台移动应用开发框架，它借鉴了 React 的思想，使得开发者可以用同样的方式来编写全平台的应用程序。

    3 年前
  • npm 包 tko.utils.jsx 使用教程

    前端开发是一门技术复杂的学科。为了提高生产效率，很多前端工程师们都会使用一些优秀的 npm 包来进行开发。如今，npm 生态已经非常成熟，拥有着各种各样的优秀 npm 包。

    3 年前
  • npm 包 homebridge-sbox-garagedoor 使用教程

    前言 随着物联网的发展，智能家居越来越流行。家庭自动化也成为了当前许多人研究和开发的热门领域。而门禁系统也是智能家居中一个重要的组成部分，目前市场上有很多不同的门禁系统。

    3 年前
  • npm 包 webpack-manifest-replace-plugin 使用教程

    webpack-manifest-replace-plugin 是一个用于替换 HTML 中 manifest 文件路径的 webpack 插件。该插件可以帮助我们在构建过程中自动更新 index.h...

    3 年前
  • npm 包 @parthar/rbac 使用教程

    角色基础访问控制 (RBAC) 是实现许多应用程序中对用户和对其控制的关键。RBAC 使得管理员可以分配一组操作和任务给一个或多个角色，然后将这些角色分配给用户或资源。

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

    简介 quiver-react-suppor 是一个基于 Quiver 平台的 React 支持工具，旨在方便开发者将 React 组件嵌入到 Quiver 应用程序中。

    3 年前
  • npm 包 @avaragado/xstateful 使用教程

    前言 在前端开发中，我们经常会使用一些状态管理库来处理复杂的交互逻辑，其中 XState 是一个非常优秀的状态管理库。但是，与 React 等库结合使用时，需要我们手动处理状态的传递和维护。

    3 年前

相关推荐

    暂无文章