如何在 angular 中进行叠加入职、演练、产品导览

How to do overlay onboarding, walkthrough, product guided tour in angular

很难找到与导游/入职培训/等有关的好看的东西 angular,大多数这些图书馆很丑陋,被遗弃,或者只为桌面驱动的游览而建。对于移动设备,没有库可以正确支持它。大多数用户搜索 material design tour onboarding,正如我们在 android 图书馆中看到的那样,但不幸的是,没有真正好的网络移动旅游图书馆。 此外,搜索您需要的解决方案有很多不同的名称,它们的叫法如此不同,因此搜索它们成为一个严重的问题。

我创建的最好的移动导览库是 MaterialTapTargetPrompt,但它是 android 的,angular 没有分支。也可以叫 ShowCaseView 等等

我想为导览覆盖入门漫游设置现有库步骤,我的问题是 - 也许有人知道一些最新的、更好的库,或者 Angular Material 团队会为此实现自己的库?

  1. ngx-guided-tour and tutorial on medium. Demo。带覆盖。难以适应移动


  1. ngx-tour and its demo。没有覆盖,只是游览。看起来不错,但也主要用于桌面。 也称为 ngx-tour-ng-bootstrap - 相同的库。


  1. 欢乐之旅demo,与ngx-guided-tour非常相似。但与移动视口配合使用效果更好 (some questions 在 Whosebug 上关于 joyride)


  1. angular-ui-tour demo - ngx-tour 受到此库的启发,因此它们也很相似。没有覆盖,桌面。


  1. ngx-onboarding (rosen-group/ngx-onboarding) demo - this lib looks better that all another there, but also cant be killer for material overlays like in android tapTargetPromt 库.


  1. telemachy - 废弃的 (2y) 库,覆盖步骤很差。类似于上面的库。


  1. miraxes/angular-custom-tourdemo叠加,步骤。相似.


  1. bdc-walkthrough demo - 桌面驱动,没有覆盖的步骤...


  1. angular-onboarding-overlay demo - 自定义解决方案,不是库,也许不错,但很难适应移动设备


  1. ngx-walkthrough page - 没有演示,很好的屏幕截图,旧库的分支,来自 angular 5、6 等的大量分支,安装错误。会看到


总结:

我没有在那里找到任何好的库来在移动设备上进行简单而漂亮的入职培训。所有这些 step-ish poppers 和 modals 看起来都像是烦人的大工具提示。不知道为什么直到 2020 年 angular(和 angular-material 库)都没有适合这种情况的库。如果有人为这种情况提出另一个 libs/ways 解决方案,我会很高兴。

我希望,很快我们就会有类似 android material 的入职培训,例如 there

启发灵感的好链接:

https://www.pinterest.com/Johnsenmc/app-overlay-examples/

pics

在花了很多时间寻找和评估各种方法之后,我也有同样的惊讶。目前为止我发现的最好的是 introjs.com。然而,它并不完全令人满意,尤其是在让用户与应用程序交互时(我无法使用 disableInteraction 选项),以及在应用程序页面之间切换。

如果有人有新的建议,我非常感兴趣!