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

Kur*_*gor 2 walkthrough angular-material angular

很难找到与导览/入职/etc相关的好看的东西angular,大多数库都是丑陋的、废弃的或仅为桌面驱动的导览而构建的。对于移动设备,没有库可以正确支持它。大多数用户搜索 Material design tour onboarding,正如我们在 android 库中看到的那样,但不幸的是,没有真正好的网络移动之旅库。此外,搜索您需要的解决方案有很多不同的名称,它们的名称如此不同,因此搜索它们成为一个严重的问题。

我创建的最好的移动导览库是MaterialTapTargetPrompt,但它适用于 android,并且没有用于 angular 的分支。它也可以称为 ShowCaseView 等。

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

Kur*_*gor 11

  1. ngx-guided-tourmedium 教程演示。带叠加。很难适应手机

ngx 导览


  1. ngx-tour及其演示。没有叠加,只是游览。看起来不错,但也主要用于桌面。也称为ngx-tour-ng-bootstrap- 相同的库。

ngx-tour


  1. 兜风之旅演示,非常相似ngx-guided-tour。但与移动视口配合使用效果更好(StackOverflow 上的一些关于joyride 的问题)

兜风之旅


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

angular-ui-tour


  1. ngx-onboarding ( rosen-group/ngx-onboarding )演示- 这个库看起来比那里的其他库更好,但也不能像 android tapTargetPromt库那样成为材质覆盖的杀手。

在此处输入图片说明


  1. Telemachy - 废弃的 (2y) lib,带有较差的叠加步骤。类似于上面的库。

远程机械


  1. miraxes/angular-custom-tour演示叠加,步骤。相似的。

角度定制之旅


  1. bdc-walkthrough 演示- 桌面驱动,没有叠加的步骤...

bdc-演练


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

角度入职覆盖


  1. ngx-walkthrough页面- 没有演示,很好的屏幕截图,旧库的一个分支,来自 angular 5、6 等的大量分支,安装错误。等着瞧

ngx-演练


总结

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

我希望,不久我们将有一些像Android这样的材料入职那里

激发灵感的好链接:

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

图片

类似的搜索但没有成功