0.9.5 • Published 6 years ago
@tk-ng/onboarding v0.9.5
Onboarding with ngrx
Setup
Import module, place component in root app, set steps (OnboardingSetSteps(OnboardingItem[]))
Inputs <onboarding>
property | default |
---|---|
auditTime number | 0 |
margin number | 10 |
navigatorMargin number | 20 |
navigator ComponentType<any> | OnboardingNavigatorComponent |
Custom navigator
Make your custom component and use things like below to navigate:
export class OnboardingNavigatorComponent implements OnInit
{
onboardingData: Observable<OnboardingNavigatorData>;
constructor( private store: Store<any> )
{
}
ngOnInit()
{
this.onboardingData = this.store.pipe( select( getOnboardingNavigatorData ) );
}
next()
{
this.store.dispatch( new OnboardingNext );
}
prev()
{
this.store.dispatch( new OnboardingPrevious );
}
end()
{
this.store.dispatch( new OnboardingEnd );
}
}
OnboardingItem
property | reqired |
---|---|
content string | yes |
selector string | no |
title string | no |
link string | no |
before Function | no |
delay number | no |
Actions
- OnboardingSetSteps ( data: OnboardingItem[] )
- OnboardingSetCurrent ( value: number )
- OnboardingUpdatePosition
- OnboardingStart
- OnboardingEnd
- OnboardingNext
- OnboardingPrevious
Required styles
@import '~@angular/cdk/overlay';
@include cdk-overlay();
.onboarding-overlay
{
z-index : 1000; // or other value
position : fixed;
background-color : rgba(0, 0, 0, 0.5);
}
Example
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { OnboardingItem, OnboardingSetSteps, OnboardingStart } from '@tk-ng/onboarding';
@Component( {
selector: 'app-root',
template: `
<onboarding></onboarding>
<a routerLink="/a" class="btn btn-link">a</a>
<a routerLink="/b" class="btn btn-link">b</a>
<hr>
<button (click)="start()">start</button>
<div style="margin: 100px; height: 100px; width: 200px; background: antiquewhite" class="item-1">lorem ipsum</div>
<div style="margin-top: 150px; margin-right: 50px; padding: 20px; height: 100px; width: 200px; background: antiquewhite" class="item-2">lorem ipsum</div>
<router-outlet></router-outlet>
`,
} )
export class AppComponent implements OnInit
{
constructor( private store: Store<any> )
{}
start()
{
this.store.dispatch( new OnboardingStart );
}
ngOnInit()
{
const steps: OnboardingItem[] = [
{ selector: '.item-1', title: 'title 1', content: 'lorem ipsum', link: '/a' },
{ selector: '.item-2', content: 'lorem ipsum 2', link: '/b', before: () => {console.log( 'step 2' ); } },
{ content: 'lorem ipsum 3', link: '/b', before: () => {console.log( 'step 3' ); } },
];
this.store.dispatch( new OnboardingSetSteps( steps ) );
}
}