Я уверен, что в 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>
Сделайте то же самое с идентификаторами шагов, которые у вас есть, и все .. 😄
Дайте мне знать, если вы успешно включили это в свой проект. Удачного кодирования ⚡️.