Shepherd.js 用户引导库快速构建应用内引导式导航的完整指南【免费下载链接】shepherdGuide your users through a tour of your app项目地址: https://gitcode.com/gh_mirrors/sh/shepherd产品上线后新用户常常不知道从哪里点起。Shepherd.js 是一个开源的用户引导库能把应用里的按钮、面板逐一高亮配上文字说明做成一步步的引导式导航帮用户快速熟悉功能。它由 Ship Shape 团队维护纯 JavaScript 和主流前端框架都能用体积轻、定制空间大。一句话说清它是什么为谁解决什么问题Shepherd.js 的名字来自牧羊犬应用是草地用户是羊这个库就是那只带路的狗。它解决的核心痛点是——功能开发完了用户却不会用。你把关键界面元素一个个圈出来在旁边弹出带说明的提示框用户点下一步就走一步走完全程就完成一次导览。全程不跳页、不自己写弹窗逻辑靠配置就能跑起来。核心能力步骤化导览创建一个 Tour用addStep逐步添加每步指定挂载到哪个页面元素、朝哪个方向上/下/左/右提示框会借助内置的 floating-ui 自动贴合定位换布局也不乱。高亮遮罩与自动滚动开启useModalOverlay后整页变暗只留目标元素亮着像打了一束追光还可以配置自动滚动保证用户始终看得见当前步骤。事件系统库暴露on、off、once方法步骤完成、导览结束等节点都能挂事件方便你接入埋点或做上一步/下一步的自定义按钮。兼容面支持 IE/Edge、Firefox、Chrome、Safari 的主流版本纯 JS、ES Modules 直接可用React、Vue、Angular、Ember 均有对应封装。快速上手与框架集成安装走 npmnpm install shepherd.js再引入配套的样式文件即可。主要用法就三步创建 Tour 实例 →addStep添加步骤每步填目标元素、方位、文案和按钮→ 调用start()开跑。框架项目不必从零接React 官方封装就在这个仓库的 packages/react/ 里另有 vue-shepherd、angular-shepherd、ember-shepherd 三个社区封装可对照选用。安装方式细节可看 docs-src/src/content/docs/guides/install.mdx。用户引导的 3 个典型用例新用户入门SaaS 工具用 SimplePlanner 的做法带新注册用户过一遍协作排期界面降低上手门槛。首次配置向导LogSeq 用它引导用户完成初始化设置避免用户对着空白页发呆。功能更新与站点导览Drupal 用它给核心模块做站点内导览发新版时把老用户引到新功能处。小结一句话配置驱动的轻量引导库把带用户逛一遍应用这件麻烦事变成几行声明式代码。适合需要新用户引导、功能导览或更新提示的前端项目尤其是有 React/Vue 等框架背景的团队。资源使用文档docs-src/src/content/docs/guides/usage.md样式定制docs-src/src/content/docs/guides/styling.md核心源码shepherd.js/src/React 封装packages/react/【免费下载链接】shepherdGuide your users through a tour of your app项目地址: https://gitcode.com/gh_mirrors/sh/shepherd创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Shepherd.js 用户引导库：快速构建应用内引导式导航的完整指南
Shepherd.js 用户引导库快速构建应用内引导式导航的完整指南【免费下载链接】shepherdGuide your users through a tour of your app项目地址: https://gitcode.com/gh_mirrors/sh/shepherd产品上线后新用户常常不知道从哪里点起。Shepherd.js 是一个开源的用户引导库能把应用里的按钮、面板逐一高亮配上文字说明做成一步步的引导式导航帮用户快速熟悉功能。它由 Ship Shape 团队维护纯 JavaScript 和主流前端框架都能用体积轻、定制空间大。一句话说清它是什么为谁解决什么问题Shepherd.js 的名字来自牧羊犬应用是草地用户是羊这个库就是那只带路的狗。它解决的核心痛点是——功能开发完了用户却不会用。你把关键界面元素一个个圈出来在旁边弹出带说明的提示框用户点下一步就走一步走完全程就完成一次导览。全程不跳页、不自己写弹窗逻辑靠配置就能跑起来。核心能力步骤化导览创建一个 Tour用addStep逐步添加每步指定挂载到哪个页面元素、朝哪个方向上/下/左/右提示框会借助内置的 floating-ui 自动贴合定位换布局也不乱。高亮遮罩与自动滚动开启useModalOverlay后整页变暗只留目标元素亮着像打了一束追光还可以配置自动滚动保证用户始终看得见当前步骤。事件系统库暴露on、off、once方法步骤完成、导览结束等节点都能挂事件方便你接入埋点或做上一步/下一步的自定义按钮。兼容面支持 IE/Edge、Firefox、Chrome、Safari 的主流版本纯 JS、ES Modules 直接可用React、Vue、Angular、Ember 均有对应封装。快速上手与框架集成安装走 npmnpm install shepherd.js再引入配套的样式文件即可。主要用法就三步创建 Tour 实例 →addStep添加步骤每步填目标元素、方位、文案和按钮→ 调用start()开跑。框架项目不必从零接React 官方封装就在这个仓库的 packages/react/ 里另有 vue-shepherd、angular-shepherd、ember-shepherd 三个社区封装可对照选用。安装方式细节可看 docs-src/src/content/docs/guides/install.mdx。用户引导的 3 个典型用例新用户入门SaaS 工具用 SimplePlanner 的做法带新注册用户过一遍协作排期界面降低上手门槛。首次配置向导LogSeq 用它引导用户完成初始化设置避免用户对着空白页发呆。功能更新与站点导览Drupal 用它给核心模块做站点内导览发新版时把老用户引到新功能处。小结一句话配置驱动的轻量引导库把带用户逛一遍应用这件麻烦事变成几行声明式代码。适合需要新用户引导、功能导览或更新提示的前端项目尤其是有 React/Vue 等框架背景的团队。资源使用文档docs-src/src/content/docs/guides/usage.md样式定制docs-src/src/content/docs/guides/styling.md核心源码shepherd.js/src/React 封装packages/react/【免费下载链接】shepherdGuide your users through a tour of your app项目地址: https://gitcode.com/gh_mirrors/sh/shepherd创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考