Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tonysamperi/ngx-tour-wizard
Product Tour Wizard built with Angular
https://github.com/tonysamperi/ngx-tour-wizard
Last synced: about 2 months ago
JSON representation
Product Tour Wizard built with Angular
- Host: GitHub
- URL: https://github.com/tonysamperi/ngx-tour-wizard
- Owner: tonysamperi
- Created: 2018-10-09T08:37:46.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-19T16:42:56.000Z (3 months ago)
- Last Synced: 2024-11-08T01:09:11.094Z (2 months ago)
- Language: TypeScript
- Homepage: https://tonysamperi.github.io/ngx-tour-wizard
- Size: 7.18 MB
- Stars: 16
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
Awesome Lists containing this project
- awesome-angular - ngx-tour-wizard - Product Tour Wizard. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-tour-wizard - Product Tour Wizard. (Table of contents / Third Party Components)
README
# ngx-tour-wizard
A cool Angular 8+ module for intro tours!
*ngx-tour-wizard* a highly customizable library. Popper are made with NgxPopperjs.
[](https://www.npmjs.com/package/ngx-tour-wizard)
[](https://www.npmjs.com/package/ngx-tour-wizard)
[](https://github.com/tonysamperi/ngx-tour-wizard/blob/master/LICENSE)
[](https://travis-ci.org/tonysamperi/ngx-tour-wizard)
[](https://unpkg.com/[email protected]/bundles/ngx-tour-wizard.umd.js)
# Before starting
##IMPORTANT for IE
This library use CustomEvents. If you want compatibility with IE,
you should add a polyfill to your app polyfills.ts.
See polyfill on [gist](https://gist.github.com/tonysamperi/0e73f8489000e8261600a92af92748c1)
##Styling
As you may know directives don't have a "Styles" property.
So it's impossible to let them style your markup,
**unless** you include an external CSS.
For this purpose you can import prebuild themes for ngx-tour-wizard...
...in SASS style, where you can edit variables (it's very straight forward so read the source)
`@import "node_modules/ngx-tour-wizard/scss/tour-wizard.scss";`
...or in CSS style (and you can always override everything you want)
`@import "node_modules/ngx-tour-wizard/css/tour-wizard.css";`
Be sure of including at least one of these in your styles.css / styles.scss
to get the basic style
## Installation
```bash
$ npm install ngx-tour-wizard@latest
```
and then from your Angular `AppModule`:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import what you need from ngx-mat-lib
import { NgxTourWizardModule } from 'ngx-tour-wizard';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify the import
NgxTourWizardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
You can optionally use the `forRoot()` method and pass tourWizardDefaults as follows
```js
// ...
providers: [
NgxTourWizardModule.forRoot({
backdropTarget: ".my-selector",
backdropEnabled: true,
keyboardEnabled: false
})
]
// ...
```
Once your library is imported, you can use its components, directives and pipes in your Angular application:
```html
{{title}}
Start tour
MY ANCHOR 1
MY ANCHOR 2
MY ANCHOR 3
```
```typescript
import { TourWizardService, TourWizardStep } from 'ngx-tour-wizard';
export class MyComponent {
constructor(private _tourWizardService: TourWizardService) {
}
ngOnInit(): void {
this._tourWizardService.initialize([
{
anchorId: "FOO_1",
content: "Some text for FOO 1",
title: "First"
},
{
anchorId: "FOO_2",
content: "Some other stuff for FOO 2",
title: "Second"
},
{
anchorId: "FOO_3",
content: "Let's finish this up!!!",
title: "Third"
},
] as TourWizardStep[]);
}
startTour(): void {
this._tourWizardService.start();
}
}
```
Versioning
ngx-tour-wizard will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:
..
And constructed with the following guidelines:
Breaking backward compatibility bumps the major (and resets the minor and patch)
New additions, including new icons, without breaking backward compatibility bumps the minor (and resets the patch)
Bug fixes, changes to brand logos, and misc changes bumps the patch
For more information on SemVer, please visit http://semver.org.
## License
MIT © [Tony Samperi](mailto:[email protected])
This library is free, open source, and GPL friendly. You can use it for
commercial projects, open source projects, or really almost whatever you want.
Attribution is required by MIT, SIL OLF, and CC BY licenses.
Downloaded files already contain embedded comments with sufficient attribution,
so you shouldn't need to do anything additional when using these files normally.
# TODOS
* IMPORTANT!! Add optional ID for backdrop, or custom backdrop
* Optional pause on click outside
* Add option to remove backdrop and kboard on end?
* Disable tour on route change??
* Disable scrolling between 2 steps?
* Async content?