记录introjs在react中的应用

先上效果图：

安装依赖

1、安装introjs和introjs-react依赖

npm install intro.js intro.js-react

2、引入introjs-react和样式文件

import { useState } from 'react'
import { Steps } from 'intro.js-react'
import "intro.js/introjs.css";

3、定义步骤对应的class–描述文字

const steps = [{element: ".hello",intro: "Hello step"},{element: ".world",intro: "World step"},{element: ".alive",intro: "alive step"}
]const [stepsEnabled, setstepsEnabled] = useState(false)function onIntroJs() {setstepsEnabled(bool => !bool)
}<div><Stepsenabled={stepsEnabled}steps={steps}initialStep={0} // 初始化从第几步骤开始onExit={() => setstepsEnabled(false)}/><h1 className="hello">Hello,</h1><hr /><h1 className="world">World!</h1><hr /><h1 className="alive">It's alive!</h1><div><button onClick={onIntroJs}>开始引导</button></div>
</div>

拓展

上图（Hints的使用）

import { Hints } from 'intro.js-react'const hints = [ // 右上角的圆圈指示按钮{element: ".hello", // 对应的classhint: "Hello hint", // 提示文字hintPosition: "middle-right" // 显示位置}
]{/* 圆圈指示按钮 */}
<Hints enabled={true} hints={hints} /> <h1 className="hello">Hello,</h1>

备注：有哪些配置啥的，直接去源码里面看就行，下面是options的配置项，自己试试就好了！！

introjs,intro.js-react 步骤指引相关推荐

Intro.js轻松搞定页面引导流程
Intro.js介绍:Intro.js是一个用于用户引导的js框架,只要你在项目中引入intro.js和 introjs.css文件,相应的元素上添加属性data-step步骤 data-intro引 ...
Intro.js 分步向导插件使用方法 1
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/w178191520/article/details/84181455 简介为您的网站和项目提供一步 ...
如何在vue项目中，跨页面（跨路由）使用新手引导工具 Intro.js
文章目录功能要求使用Intro.js遇到的问题以及代码 1.不能跨路由 utils -> intro.js 2.要在页面引导所需显示的数据全部拿到且渲染完毕以后加载Intro.js intr ...
intro.min.js_使用Intro.js构建分步指南[教程]
有许多插件可用于创建您自己的引导式网站导览. 这种动画页面效果对刚刚了解您网站布局的新访客非常有用. 他们怎么知道所有重要的界面功能和菜单链接? 通过使用导览,很容易向感兴趣的用户解释所有这些功能. ...
前端教程之Intro.js轻松实现新手引导效果
在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更好的熟悉新版本页面的功能和使用,那么你知道应该如何才能够实现这种效果吗?小千今天就来给大家介绍一个非常好用 ...
React高级指引：无障碍
上一节:以React的方式思考下一节:代码分割 React高级指引:无障碍为什么要使用无障碍辅助功能标准和指南 WCAG WAI-ARIA 语义化的HTML 无障碍表单标签向用户提醒错误控 ...
前端教程之Intro.js轻松实现引导效果
在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更好的熟悉新版本页面的功能和使用,那么你知道应该如何才能够实现这种效果吗?小千今天就来给大家介绍一个非常好用 ...
Node.js + React + MongoDB 实现 TodoList 单页应用
之前用 Ant Design 开发了一个项目,因此对 React 的特性有了一定的了解,React 使用封装组件的思想,组件各自维护自己的状态和 UI, 组件之间通过 props 传递数据和方法.当状 ...
asp.net 加入html,css,js的步骤与错误总结
asp.net 加入html,css,js的步骤与错误总结介绍 html转为aspx 错误总结 asp.net 加入html,css,js的步骤与错误总结介绍 asp.net加入html,css, ...

introjs,intro.js-react 步骤指引

记录introjs在react中的应用

先上效果图：

安装依赖

1、安装introjs和introjs-react依赖

2、引入introjs-react和样式文件

3、定义步骤对应的class–描述文字

拓展

上图（Hints的使用）

备注：有哪些配置啥的，直接去源码里面看就行，下面是options的配置项，自己试试就好了！！

introjs,intro.js-react 步骤指引相关推荐

最新文章

热门文章