Ionic4 и Intro.js проблемы с отображением - PullRequest
Новая
       19

Ionic4 и Intro.js проблемы с отображением

0 голосов
/ 05 июля 2019

После установки Intro.js в приложение Ionic4 всплывающие подсказки не отображаются правильно из коробки.

Запуск introJs (). Start (); запускает всплывающую подсказку, но отображение неверно.

Подсказки должны отображаться на правильном элементе, и этот элемент должен отображаться поверх оверлея.

Ответы [ 2 ]

0 голосов
/ 05 июля 2019

Если (и только если) вы достаточно смелы, я сделал упаковочный пакет для intro.js, который будет использоваться в качестве директивы для приложения Angular.

Это частный (@) пакет, который я сделал для меня и моей компании, поэтому он не совсем хорошо документирован, но, несомненно, поддерживается

https://www.npmjs.com/package/@esfaenza/ngx-introjs

Маленький путеводитель:

1) Установите пакет с 

npm install @esfaenza/ngx-introjs

(вы должны проверить нужную вам версию. Начиная с версии Angular 8 и далее, я следовал версии Angular, начиная с версии 8, просто попробуйте последнюю доступную сборку)

2) В вашем модуле: 

import { IntroJsModule } from "@esfaenza/ngx-introjs"
...
@NgModule({
imports: [IntroJsModule, etc...],
declarations: [your stuff],
exports: [your stuff]
})

3) В .ts вашего компонента определите данные вступления 

public const IntroItems = {
'Group': '1',
'1': 'Step 1 description',
'2': 'Step 2 description'
};

4) В вашем HTML прикрепите директиву, где вам это нужно 

[intro]="IntroItems" [Order]="1"

5) Чтобы начать презентацию, введите IntroJsService, как это делается в вашем компоненте: 

import { IntroJsService } from "@esfaenza/ngx-introjs";
constructor(public introService: IntroJsService, etc...) { }

6) и используйте его так: 

this.introService.start(null, '1');

7) Если вы хотите изменить параметры по умолчанию для intro.js, вы можете использовать 

this.introService.setOptions(...)
0 голосов
/ 05 июля 2019

Хитрость здесь в том, чтобы сделать introjs для добавления в корневой каталог вашего компонента.По умолчанию intro.js добавляет div к элементу body, поэтому всплывающие подсказки не отображаются нормально.Для запуска intro.js на home.page.ts необходимо указать с помощью document.querySelector (yourcomponentselector) 

import { Component } from '@angular/core';

import * as introJs from 'intro.js/intro.js';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

  showHelp(){
    introJs(document.querySelector("app-home")).setOptions({
      'nextLabel': 'Next step',
      'prevLabel': 'Previous step',
      'skipLabel': 'Don\'t bother me!',
      'doneLabel': 'Finish'
    }).start(); 
  }
}

Дополнительно, свойство css некоторых ионных компонентов должно быть переопределено.

ion-nav,
ion-tab,
ion-tabs,
ion-list {
    contain: none;
}

Я загрузил пример проекта на github: https://github.com/konum/ionic4-introjs/

...