# @mbamobi/tour-component

> Tour component for ionic2

Latest version **0.0.12** (published 2019-05-15) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install @mbamobi/tour-component
pnpm add @mbamobi/tour-component
yarn add @mbamobi/tour-component
bun add @mbamobi/tour-component
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.12 |
| Published | 2019-05-15 |
| First published | 2017-08-09 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 123.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | MBA |
| Maintainers | adminmba, cimbamobi, danielluz |
| Keywords | ionic, angular, tour component |

## Links

- npm: https://www.npmjs.com/package/@mbamobi/tour-component
- Repository: https://github.com/mbamobi/tour-component
- Homepage: http://mbamobi.com.br
- Issues: https://github.com/mbamobi/tour-component/issues
- npm.io page: https://npm.io/package/@mbamobi/tour-component

## Recent versions

- 0.0.12 (latest) — 2019-05-15
- 0.0.11 — 2017-11-21
- 0.0.10 — 2017-11-20
- 0.0.9 — 2017-11-20
- 0.0.8 — 2017-10-02
- 0.0.7 — 2017-10-02
- 0.0.6 — 2017-10-02
- 0.0.5 — 2017-09-12
- 0.0.4 — 2017-09-01
- 0.0.3 — 2017-08-10
- 0.0.2 — 2017-08-10
- 0.0.1 — 2017-08-09

## README

# Tour Component

Componente que cria um overlay, destacando algum elemento da tela, para exemplificar/explicar algo.

![](tour.png)

## Como instalar?
* Utilize o comando:
```sh
npm install @mbamobi/tour-component
```

## Como utilizar?

```typescript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

import { TourComponentModule } from '@mbamobi/tour-component';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    TourComponentModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
```

Na page (.ts) onde se quer colocar, refereciar o(s) elemento(s) a ser(em) colocardo(s) no overlay. E carregar os passos do tutorial:

```typescript
@ViewChild('elemento') elemento;
@ViewChild('elemento2') elemento2;

...

carregarTour() {
  let step1 = new Step();
  step1.addHighlight(new Highlight(this.elemento.getElementRef(), {
    cls: 'tour-elemento',
    title: 'Titulo elemento',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    event: {
      before: () => this.content.scrollTo(0, 0)
    }
  }));
  let step2 = new Step();
  step2.addHighlight(new Highlight(this.elemento2.getElementRef(), {
    cls: 'tour-elemento-2',
    title: 'Titulo elemento 2',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    event: {
      before: () => this.content.scrollTo(0, 0)
    },
    pointerToHighlight: true //este parâmetro insere uma div após o elemento (dentro do overlay).
  }));
  // Para opções do slideEffect, [veja](https://ionicframework.com/docs/api/components/slides/Slides/#input-properties)
  let tour = this.tourCtrl.create({steps: [ step1, step2 ], showCloseOnlyOnLastPage: true, slideEffect: 'fade'});
  tour.present();
}

```

---
_Source: https://npm.io/package/@mbamobi/tour-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._