ngx-ui-tour-core
Version:
UI tour library for Angular 12+
137 lines (96 loc) • 4.6 kB
Markdown
> UI tour library for Angular
Angular Material, Ionic, Taiga UI, Ng Bootstrap and Ngx Bootstrap UIs are supported.
`ngx-ui-tour` is a fork of __Isaac Mann's__ `ngx-tour`. The project had to be forked since the original is no longer
maintained.
---
[](https://www.npmjs.com/package/ngx-ui-tour-core)
[](https://www.npmjs.com/package/ngx-ui-tour-core)
[](https://www.npmjs.com/package/ngx-ui-tour-core)
## Table of contents
- [Demo and documentation](#demo-and-documentation)
- [Compatibility](#compatibility)
- [Installation and Usage](#installation-and-usage)
- [FAQ](#faq)
- [TourService](#tourservice)
- [Step Configuration](#step-configuration)
- [Defaults](#defaults)
- [Hotkeys](#hotkeys)
- [Event Observables](#event-observables)
- [Custom template](#custom-template)
- [Styling Active Tour Anchor](#styling-active-tour-anchor)
- [Targeting Third Party Elements](#targeting-third-party-elements)
- [License](#license)
## Demo and documentation
Demo and documentation can be found at [hakimio.github.io/ngx-ui-tour](https://hakimio.github.io/ngx-ui-tour)
## Compatibility
### Material Design and Ngx Bootstrap tour UIs
| Angular | RxJS | ngx-ui-tour |
|---------|------|-------------|
| 19 | 7 | 14 |
| 18 | 7 | 13 |
| 17 | 7 | 12 |
| 16 | 7 | 11 |
| 15 | 7 | 10 |
| 14 | 6, 7 | 9 |
| 12-13 | 6, 7 | 8 |
| 9-12 | 6 | 7 |
### NG Bootstrap tour UI
| Angular | RxJS | ngx-ui-tour |
|---------|------|-------------|
| 19 | 7 | 16 |
| 18 | 7 | 15 |
| 17 | 7 | 14 |
| 16 | 7 | 13 |
| 15 | 7 | 12 |
| 14 | 6, 7 | 11 |
| 12-13 | 6, 7 | 10 |
| 9-12 | 6 | 9 |
### Ionic tour UI
| Angular | RxJS | Ionic | ngx-ui-tour |
|---------|------|-------|-------------|
| 19 | 7 | 8 | 6 |
| 18 | 7 | 8 | 5 |
| 18 | 7 | 7, 8 | 4 |
| 17 | 7 | 7, 8 | 3 |
| 16 | 7 | 6, 7 | 2 |
| 15 | 7 | 6, 7 | 1 |
### Taiga UI tour UI
| Angular | RxJS | Taiga UI | ngx-ui-tour |
|---------|------|----------|-------------|
| 19 | 7 | 4 | 8 |
| 18 | 7 | 3 | 7 |
| 17 | 7 | 3 | 6 |
| 16 | 7 | 3 | 5 |
| 15 | 7 | 3 | 4 |
| 14 | 6, 7 | 3 | 3 |
| 12-13 | 6, 7 | 2 | 2 |
| 9-12 | 6 | 2 | 1 |
## Installation and Usage
- [Material Design UI](https://hakimio.github.io/ngx-ui-tour/md-menu/Setup)
- [Ionic UI](https://hakimio.github.io/ngx-ui-tour/ion-popover/Setup)
- [NG Bootstrap UI](https://hakimio.github.io/ngx-ui-tour/ng-bootstrap/Setup)
- [Ngx Bootstrap UI](https://hakimio.github.io/ngx-ui-tour/ngx-bootstrap/Setup)
- [Taiga UI Dropdown UI](https://hakimio.github.io/ngx-ui-tour/tui-dropdown/Setup)
- [Taiga UI Hint UI](https://hakimio.github.io/ngx-ui-tour/tui-hint/Setup)
- [JavaScript Console UI](https://hakimio.github.io/ngx-ui-tour/console/Setup)
## FAQ
[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/FAQ)
## Step Configuration
[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/API#step-config)
## Defaults
[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/Misc#defauls)
## TourService
[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/API#tour-service)
## Event Observables
[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/API#events)
## Hotkeys
[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/Misc#hotkeys)
## Custom template
[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/Misc#custom-template)
## Styling Active Tour Anchor
[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/Misc#styling-active-anchor)
## Targeting third party elements
[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/Misc#targeting-third-party-elements)
## License
MIT