Driver.js — 一个开源、无依赖的新手交互指南库,功能强大且高度可定制
可以快速实现新手引导效果,自带动画,体验极佳,高度可定制。
Driver.js 是一个 javascript 工具库,可以让新手用户轻松快速了解产品并帮助他们专注于功能,便于他们很快熟悉我们的产品。
无论是开发APP还是Web应用程序,新手指导都是普遍的需求,在这两个领域一般都需要。
安装操作
yarn add driver.js
npm install driver.js
也可以直接在线或本地引入,注意呈现CSS文件。
使用它的最简单方法是简单地通过提供 CSS 选择器来突出显示元素。
调整弹出框的位置。
driver.highlight({
element: '#some-element',
popover: {
title: '弹出框的标题',
description: 'Description for it',
// top-center, top-right, right, right-center, right-bottom,
// 底部, 底部中心, 右下, 中间
位置: 'left',
}
});
以上都是小打小闹。最常见的新手引导交互就是多步引导,让用户一步步了解功能,实现这个效果也很简单。
// 定义步骤
driver.defineSteps([
{
element: '#first-element-introduction',
popover: {
className: 'first-step-popover-class',
title: 'Title on Popover',
description: 'Body of the popover',
position: 'left'
}
},
{
element: '#second-element-introduction',
popover: {
title: 'Title on Popover',
description: 'Body of the popover',
position: 'top'
}
} ,
{
element: '#third-element-introduction',
弹出框:
描述:'弹出框的主体',
位置:'right'
}
},
]);// 开始引导
driver.start();
很酷,使用起来毫不费力,还可以通过编写我们的 CSS 样式来自定义遮罩的样式,以便它与应用程序的样式完全匹配。官方文档中有更强大的功能,感兴趣的开发者可以仔细阅读。
留言与评论(共有 0 条评论) “” |