Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
nativescript-app-tour-updated
Advanced tools
NativeScript plugin for building a tour, showcase or a walkthrough for your app.
Readme
Note: This Plugin based on MaterialShowcase for IOS and TapTargetView for Android .
tns plugin add nativescript-app-tour-updated
<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 :+1: .
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
FAQs
NativeScript plugin for building a tour, showcase or a walkthrough for your app.
The npm package nativescript-app-tour-updated receives a total of 1 weekly downloads. As such, nativescript-app-tour-updated popularity was classified as not popular.
We found that nativescript-app-tour-updated demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.