Я уверен, что в Angular и Ionic доступно множество плагинов для создания вводных или пошаговых страниц, но хорошее вводное руководство является обязательным для мобильных и веб-приложений, где удобство использования или удобство использования имеют значение.

Как обсуждалось на этом веб-сайте usability.gov UX основывается на нескольких принципах, я просто упомяну источник, и вы все можете хорошо прочитать и попытаться создать свой следующий проект с учетом этого. Это был всего лишь беглый взгляд на UX, я подумал, что было бы неплохо упомянуть об этом для примера использования.

Вернемся к реальной сделке, на днях я пытался реализовать вступление, которое могло бы точно описать, что каждая кнопка / меню делает в приложении ... поэтому я наткнулся на Intro JS: еще одну ванильную библиотеку JS / Библиотека CSS для добавления пошагового введения или подсказок.

Начнем с установки библиотеки через NPM.

npm install --save intro.js
npm install --save @types/intro.js

Нет необходимости добавлять его в app.module, просто откройте index.html и добавьте следующие строки CDN (CDN означает сеть доставки контента: это означает, что некоторые люди сделали эти файлы доступны с удаленных серверов через WWW, все, что вам нужно сделать, это загрузить их 😏 ):

<!--intro.js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js"></script>

Это почти все, что нам нужно сделать в качестве конфигурации .. 😀!

Теперь откройте компонент / страницу, в которую вы хотите интегрировать красивый вводный учебник intro js, ​​и добавьте его в свой файл машинописного текста.

// Intro method to be called 
introMethod() {
// import IntroJS
const IntroJs = require("../../../node_modules/intro.js/intro")
let intro = IntroJs();
console.log("inside intro.js");
intro.setOptions({
steps: [
{
intro: "Ahlan wa Sahlan"
},
{
element: "#step1",
intro:
"When you are slaves on Earth, and  you are told: ‘Renounce Earthly freedom, for in Heaven awaits you unimaginable freedom.’ Answer back: 'He who did not taste freedom on Earth, will not know it in Heaven!’",
position: "right"
},
{
element: "#step2",
intro:
"Most people live way too long in the past. The past is a springboard to jump forward from, not a sofa to relax on",
position: "bottom"
}
],
showProgress: true,
skipLabel: "Annuler",
doneLabel: "Commencer",
nextLabel: "Suivant",
prevLabel: "Précédent",
overlayOpacity: "0.8"
});
intro.start();
}

Вы можете изменить ярлыки по умолчанию для кнопок далее, назад, назад и готово, как описано в приведенном выше коде. образец.
Все остальное очень просто, независимо от того, какой HTML-тег вы хотите контролировать, пометив его соответствующим образом с помощью вышеупомянутых шагов. что-то вроде этого :

<div id="step1">
     // content you would like to highlight
</div>

Сделайте то же самое с идентификаторами шагов, которые у вас есть, и все .. 😄

Дайте мне знать, если вы успешно включили это в свой проект. Удачного кодирования ⚡️.