Note: This Plugin based on MaterialShowcase for IOS and TapTargetView for Android .
tns plugin add nativescript-app-tour<Label id="feat1" text="Feature 1"></Label>
<Label id="feat2" text="Feature 2"></Label>
<Button text="start" tap="{{ startTour }}"></Button>startTour(){
const stops: TourStop[] = [
{
view: this.page.getViewById("feat1"),
title: 'Feature 1',
description: "Feature 1 Description",
dismissable: true
},
{
view: this.page.getViewById("feat2"),
title: 'Feature 2',
description: 'Feature 2 Description',
outerCircleColor: 'orange',
rippleColor: 'black'
}
];
const handlers: TourEvents = {
finish() {
console.log('Tour finished');
},
onStep(lastStopIndex) {
console.log('User stepped', lastStopIndex);
},
onCancel(lastStopIndex) {
console.log('User cancelled', lastStopIndex);
}
}
this.tour = new AppTour(stops, handlers);
this.tour.show();
}
see the demo project for more info.
also in angular you can get a refrence to the target view using @ViewChild decorator as next
<Label #feat1 text="Feature 1"></Label>
<Label #feat2 text="Feature 2"></Label>
<Button text="start" tap="{{ startTour }}"></Button>@ViewChild('feat1') feat1: ElementRef;
@ViewChild('feat2') feat2: ElementRef;
startTour(){
const stops: TourStop[] = [
{
view: this.feat1.nativeElement,
title: 'Feature 1',
description: "Feature 1 Description",
dismissable: true
},
{
view: this.feat2.nativeElement,
title: 'Feature 2',
description: 'Feature 2 Description',
outerCircleColor: 'orange',
rippleColor: 'black'
}
];
const handlers: TourEvents = {
finish() {
console.log('Tour finished');
},
onStep(lastStopIndex) {
console.log('User stepped', lastStopIndex);
},
onCancel(lastStopIndex) {
console.log('User cancelled', lastStopIndex);
}
}
this.tour = new AppTour(stops, handlers);
this.tour.show();
}
| Param | Description | type | default |
|---|---|---|---|
| view (required) | nativescript view ref | View | none |
| title | stop title | string | title |
| titleTextSize | title Text Size | number | 25 |
| titleTextColor | title Text Color | string | white |
| description | stop description | string | description |
| descriptionTextSize | description Text Size | number | 20 |
| descriptionTextColor | description Text Color | string | white |
| outerCircleOpacity | outer Circle background opacity | number | 0.96 |
| outerCircleColor | outer Circle background Color | string | black |
| innerCircleColor | circle around target view background Color | string | white |
| rippleColor (ios only) | target Circle ripple Color | string | white |
| innerCircleRadius | circle around target view raduis | number | 50 |
| dismissable | can the tour canceled by taping outside of target view | boolean | false |
| Method | Description |
|---|---|
| constructor | AppTour(stops) |
| show() | start the tour |
| reset() | reset the tour to play it again |
This plugin has 3 events, finish(): void => triggered once the tour finishes onStep(lastStepIndex): void => triggered once per step when target is tapped onCancel(lastStepIndex): void => triggered once when user dismisses the tour by tapping outside in a dismissable tour
Note: If you use the same configs (colors, sizes,..etc) in all stops customize the defaults instead using AppTour defaults property which is basicly a TourStop 👍 .
- add events.
- add more options to TourStop.
if you want to help improve the plugin you can consider it yours and make as PRs as you want :)
Please, use github issues strictly for reporting bugs or requesting features.
Twitter: hamdiwanis
Email: hamdiwanis@hotmail.com