easy-intro
v0.0.6
Published
Step-by-Step operation Guide
Downloads
4
Readme
easy-intro
介绍 English
easy-intro
用于在web页面中,添加一组 引导。
通常用来介绍页面的 功能 向用户介绍页面的大致布局和功能概括;
或者 引导操作 引导用户完成首次操作体验,类似游戏中的新手指引。
通过这种方式,降低用户的学习成本和操作成本。
安装
NPM
npm install easy-intro -S
Yarn
yarn add easy-intro -S
API
| API | param | return | description | | ---------- | ---------- | ------ | ------------------------------------------------------------------------------------------------ | | addIntro | introObj | function | 为单个元素添加引导(通常引导用户点击按钮,产生真实的效果) , 返回一个函数用于移除该引导 | | addIntros | [introObj] | void | 添加一组引导,通常用于功能介绍 | | removeAllIntro | | void | 移除所有的引导元素 |
The introObj
is an Object.
| property | type | default | description | | -------- | ---- | ------- | ----------- | | el | DOM element | null | 已经出现在dom上的目标元素 | | desc | String | "" | 引导描述 | | realClick | Boolean | true | 该元素是否真的被点击(即按钮的click事件是否触发) | | hint | Boolean | true | 是否显示引导点击的动画效果 |
用法
通过插件的形式,在已有的dom元素上添加引导蒙层。
// example.js
import { addIntro, addIntros, removeAllIntro } from "easy-intro";
// Start the introduction for single defined element
const removeIntroItem = addIntro({
el: document.getElementById('button'), // 已经出现在dom上的目标元素
desc: 'Click Me!', // 引导描述
realClick: true, // 该元素是否真的被点击(即按钮的click事件是否触发)
hint: true, // 是否显示引导点击的动画效果
})
// remove this introduction
removeIntroItem();
// Start the introduction for defined elements.
addIntros([
{
el: document.getElementById('step-1'),
desc: 'First Step! click me!',
realClick: false,
hint: false,
},
{
el: document.getElementById('step-2'),
desc: 'Second Step! click me!',
realClick: false,
hint: false,
},
{
el: document.getElementById('step-3'),
desc: 'Third Step! click me!',
realClick: false,
hint: false,
}
]);
// remove All introductions
removeAllIntro();