当前栏目
前端如何实现新手引导功能?
在产品发布新版本或者有新功能上线时,经常需要新手引导功能来引导用户了解应用。下面就来分享几个开箱即用的新手引导组件库,帮你快速实现新手引导功能!
Intro.js
Intro.js 是一个使用广泛的产品引导库,它在 Github 上拥有 21.6k Star。其具有以下特点:
- 无依赖:它不需要任何其他依赖。
- 小而快:库文件较小使得引导过程流畅直观。JavaScript 文件的整体大小为 10KB,CSS 为 2.5KB。
- 用户友好:提供可以根据喜好选择的各种主题。
- 浏览器兼容性:适用于所有主流浏览器,如 Google Chrome、Mozilla Firefox、Opera、Safari 等 。
- 文档完善:文档包含要介绍的每个元素的样本和示例。
可以通过以下命令来安装 Intro.js:
安装完成后,只需三个简单的步骤即可将其添加到项目中:
- 将 JavaScript 和 CSS 文件(intro.js 和 introjs.css)添加到项目中。
- 将 data-intro 和 data-step 属性添加到相关的 HTML 元素。这将为特定元素启用 intro.js。
- 调用以下 JavaScript 函数:
可以使用以下附加参数在特定元素或类上调用 Intro.js:
Github:https://github.com/usablica/intro.js
shepherd
Shepherd 在 Github 上拥有 10.7k GitHub Star。它支持在多个前端框架中开箱即用,包括 React、Vue、Angular 等。其具有以下特点:
- 辅助功能:提供键盘导航支持,遵循 a11y 规范,还可以使用 JavaScript 启用 DOM 元素内的焦点捕获。
- 高度可定制:允许在不影响性能的情况下更改外观。
- 框架支持:随时融入项目的前端框架。
- 文档完善:文档涵盖安装和自定义,包括项目的主题和样式。
可以使用以下命令来安装 shepherd.js:
安装完成之后,可以按如下方式来使用 shepherd(以 React 为例):
- shepherd:https://github.com/shipshapecode/shepherd
- react-shepherd:https://github.com/shipshapecode/react-shepherd
- vue-shepherd:https://github.com/shipshapecode/vue-shepherd
- angular-shepherd:https://github.com/shipshapecode/angular-shepherd
React Joyride
React Joyride 在 GitHub 上拥有超过 5.1k Star,在 React 项目中开箱即用,用于向现有用户介绍新功能。其具有以下特点:
- 易于使用
- 高度可定制
- 文档完善
- 积极维护
可以使用以下命令来安装 react-joyride:
可以通过以下方式来在 React 中使用 react-joyride:
Github:https://github.com/gilbarbara/react-joyride
Vue Tour
Vue Tour 是一个轻巧、简单且可自定义的新手指引插件,可以与 Vue.js 一起使用。它提供了一种快速简便的方法来指导用户使用应用。它在 Github 上拥有 2.1 k Star。
可以通过以下命令来安装 Vue Tour:
然后在应用入口导入插件(如果使用 vue-cli 搭建项目,通常是 main.js),并在 Vue 中注册它。可以添加默认提供的样式或根据自己的喜好自定义它们。
最后将 v-tour 组件放入模板中的任何位置(通常在 App.vue 中),并向其传递一系列步骤。每个步骤的 target 属性可以将应用的任何组件中的 DOM 元素作为 target(只要在相关步骤弹出时它存在于 DOM 中)。
Github:https://github.com/pulsardev/vue-tour
Reactour
Reactour 是一个用于创建 React 应用导览的流行库。在 GitHub 上拥有 3.2K Star,它提供了一种简单的方式来引导用户浏览网站和应用。
可以通过以下命令来安装 reactour:
安装完成之后,在应用的根组件添加 TourProvider,传递元素的步骤以在浏览期间突出显示:
然后在应用树中的某个地方,使用 useTour hook 来控制 Tour:
Github:https://github.com/elrumordelaluz/reactour
相关文章
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)
- shiro中的JSP标签支持
- Java技术点-json转对象,对象转json
- SpringBoot+SpringDataJpa @Query之 JPQL使用书写模板(模糊查询and条件查询)
- Spring Boot中的Freemarker模版引擎引用css和js的正确姿势
- Node.js解压版的环境配置及相关常用命令
- JSP学习笔记(6)—— 自定义MVC框架
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
- Jsp学习笔记(4)——分页查询
- APIJSON简单使用
- JSP学习笔记(3)——JSTL 标签库
- JSP学习笔记(1)——Jsp指令、动作元素和内置对象
- JavaScript ES6 Promise对象
- Web前端——JavaScript扩展补充
- Web前端——表单提交和Js添加选项