https://github.com/miraxes/ngx-custom-tour
Custom tours for angular applications
https://github.com/miraxes/ngx-custom-tour
angular
Last synced: over 1 year ago
JSON representation
Custom tours for angular applications
- Host: GitHub
- URL: https://github.com/miraxes/ngx-custom-tour
- Owner: miraxes
- Created: 2021-11-04T19:31:37.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-14T13:16:02.000Z (over 3 years ago)
- Last Synced: 2025-03-18T18:58:08.565Z (over 1 year ago)
- Topics: angular
- Language: TypeScript
- Homepage:
- Size: 411 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-custom-tour - Easy to customize step-by-step tour / onboarding for Angular 15+. (Third Party Components / Onboarding and Product Tours)
- awesome-angular - ngx-custom-tour - Easy to customize step-by-step tour / onboarding for Angular 15+. (Third Party Components / Onboarding and Product Tours)
README
This is new a bit extended version of
[https://github.com/miraxes/angular-custom-tour](https://github.com/miraxes/angular-custom-tour).
For versions less than Angular v6, please use older version of this library.
[](https://www.npmjs.com/package/ngx-custom-tour)
[](https://www.npmjs.com/package/ngx-custom-tour)
[](https://opensource.org/licenses/MIT)
# Versions
| angular | library |
| ----------------- |:-----------:|
| below v12 | 0.1.6 |
| v13 | 0.1.7 |
| v14 | 1.1.0 |
## Breaking change
Starting from 1.x.x `selector` is not required anymore.
Instead we have `order` which REQUIRED and must be UNIQUE.
# Usage
* install `npm install ngx-custom-tour --save`
In your module (app.module.ts)
```typescript
import { NgxCustomTourModule } from 'ngx-custom-tour'
@NgModule({
...
imports: [
...
NgxCustomTourModule // Put here
...
]
...
]
```
Note: You'll need to import BrowserAnimationsModule too;
Initialize it in your page component
> In case you want to init slider after pageload, you should use ngAfterViewInit
```typescript
import { NgxCustomTourService } from 'ngx-custom-tour'
@Component({
...
providers: [... NgxCustomTourService ... ],
...
})
class AppComponent {
constructor(public customTourService: NgxCustomTourService){ }
startTour() {
this.customTourService.initialize();
}
}
```
```html
START!
WOW!
```
## NOTE:
> order MUST BE unique
## Styles
You need to inject styles from `node_modules/ngx-custom-tour/styles/styles.scss`
Feel free to import those styles directly to your scss
Also, we added some scss variables to let you adjust styles just in one line.
# Scss variables
| variable | default |
| -------------------------- |:-----------------:|
| $ct-overlay-opacity | rgba(0, 0, 0, .6) |
| $ct-header-font-size | 14px |
| $ct-container-min-width | 200px |
| $ct-primary-color | #00b2f2 |
| $ct-secondary-color | #8D0876 |
# Custom options Usage
```typescript
startTour() {
this.customTourService.initialize({elementsDisabled: false}); // HintOptions
}
```
## HintOptions
| option | default | Usage |
| -------------------------- |:---------:| ------ |
| elementsDisabled: boolean | true | Disabling highlightedElement (click) wont work|
| dismissOnOverlay: boolean | false | Go to next step when clicking on overlay (close tour if this is last step)|
| defaultPosition: string | 'bottom' | Position of tour step to highlightedElement |
| defaultLayer: number | 15 | Distance between highlightedElement and step in px |
| applyRelative: boolean | true | Applying position:relative to highlightedElement (disable in case you want to highlight absolute positioned elements) |
## Hint service events
| event | Description |
| ------------- | ------------ |
| finish$ | When tour is finished |
| showingStep$ | On each step show (Params > CurrentStep) |
This module in ~active~ development mode, if you have any suggestions feel free to contact me.