文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何实现前端新手引导功能?

2024-12-01 02:28

关注

大家好,我是 CUGGZ。

在产品发布新版本或者有新功能上线时,经常需要新手引导功能来引导用户了解应用。下面就来分享几个开箱即用的新手引导组件库,帮你快速实现新手引导功能!

Intro.js

Intro.js 是一个使用广泛的产品引导库,它在 Github 上拥有 21.6k Star。其具有以下特点:

可以通过以下命令来安装 Intro.js:

npm install intro.js - save

安装完成后,只需三个简单的步骤即可将其添加到项目中:

  1. 将 JavaScript 和 CSS 文件(intro.js 和 introjs.css)添加到项目中。
  2. 将 data-intro 和 data-step 属性添加到相关的 HTML 元素。这将为特定元素启用 intro.js。
  3. 调用以下 JavaScript 函数:
introJs().start();

可以使用以下附加参数在特定元素或类上调用 Intro.js:

introJs(".introduction-farm").start();

Github:https://github.com/usablica/intro.js。

shepherd

Shepherd 在 Github 上拥有 10.7k GitHub Star。它支持在多个前端框架中开箱即用,包括 React、Vue、Angular 等。其具有以下特点:

可以使用以下命令来安装 shepherd.js:

npm install shepherd.js -save
npm install react-shepherd --save
npm install vue-shepherd --save
npm install angular-shepherd --save

安装完成之后,可以按如下方式来使用 shepherd(以 React 为例):

import React, { Component, useContext } from 'react'
import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
import newSteps from './steps'

const tourOptions = {
defaultStepOptions: {
cancelIcon: {
enabled: true
}
},
useModalOverlay: true
};
function Button() {
const tour = useContext(ShepherdTourContext);

return (

);
}
class App extends Component {
render() {
return (



);
}
}

React Joyride

React Joyride 在 GitHub 上拥有超过 5.1k Star,在 React 项目中开箱即用,用于向现有用户介绍新功能。其具有以下特点:

可以使用以下命令来安装 react-joyride:

npm i react-joyride

可以通过以下方式来在 React 中使用 react-joyride:

import Joyride from 'react-joyride';

export class App extends React.Component {
state = {
steps: [
{
target: '.my-first-step',
content: 'This is my awesome feature!',
},
{
target: '.my-other-step',
content: 'This another awesome feature!',
},
...
]
};

render () {
const { steps } = this.state;

return (

steps={steps}
...
/>
...

);
}
}

Github:https://github.com/gilbarbara/react-joyride。

Vue Tour

Vue Tour 是一个轻巧、简单且可自定义的新手指引插件,可以与 Vue.js 一起使用。它提供了一种快速简便的方法来指导用户使用应用。它在 Github 上拥有 2.1 k Star。

可以通过以下命令来安装 Vue Tour:

npm install vue-tour

然后在应用入口导入插件(如果使用 vue-cli 搭建项目,通常是 main.js),并在 Vue 中注册它。可以添加默认提供的样式或根据自己的喜好自定义它们。

import Vue from 'vue'
import App from './App.vue'
import VueTour from 'vue-tour'

require('vue-tour/dist/vue-tour.css')

Vue.use(VueTour)

new Vue({
render: h h(App)
}).$mount('#app')

最后将 v-tour 组件放入模板中的任何位置(通常在 App.vue 中),并向其传递一系列步骤。每个步骤的 target 属性可以将应用的任何组件中的 DOM 元素作为 target(只要在相关步骤弹出时它存在于 DOM 中)。



Github:https://github.com/pulsardev/vue-tour。

Reactour

Reactour 是一个用于创建 React 应用导览的流行库。在 GitHub 上拥有 3.2K Star,它提供了一种简单的方式来引导用户浏览网站和应用。

可以通过以下命令来安装 reactour:

npm i -S @reactour/tour

安装完成之后,在应用的根组件添加 TourProvider,传递元素的步骤以在浏览期间突出显示:

import { TourProvider } from '@reactour/tour'

ReactDOM.render(


,
document.getElementById('root')
)

const steps = [
{
selector: '.first-step',
content: 'This is my first Step',
},
// ...
]

然后在应用树中的某个地方,使用 useTour hook 来控制 Tour:

import { useTour } from '@reactour/tour'

function App() {
const { setIsOpen } = useTour()
return (
<>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at
finibus nulla, quis varius justo. Vestibulum lorem lorem, viverra porta
metus nec, porta luctus orci




)
}

Github:https://github.com/elrumordelaluz/reactour。

来源:前端充电宝内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯