search

Altaba77 / ngx-walkthrough

A walkthrough/on-boarding/tour guide/learning page component which is responsive, dynamic, easy to use
MIT License
8 stars 8 forks source link

readme

ngx-walkthrough

Update of https://github.com/souly1/ng-walkthrough for angular > 6

One of the most common design challenges emerging in mobile design is that of 'invitation' - creating an explanation walk through during user first interaction with the app so to engage him. Following Theresa Neil's design patterns from [Mobile Design Pattern Gallery] (http://www.amazon.com/gp/product/1449314325/ref=as_li_ss_tl?ie=UTF8&tag=uxbo09-20&linkCode=as2&camp=217145&creative=399373&creativeASIN=1449314325)

This angular component implements a walkthrough via one of the following patterns: the transparency pattern or the tip pattern (an explanation about the different patterns can be found online at ux booth)

Get the Changelog.

Special features

ScreenShots

Transparency walkthrough in Classic, Classic with arrow mode and Totally customizable mode respectively (these screenshots have been realized on the previous version of the library, the design can be slightly different now):

alt tag alt tag alt tag

Tip walkthrough mode:

alt tag

Demo

A demo of the previous version was created to show (Note: that the attributes have been changed, see example bellow):

Requirements

Installation

Usage

Import the module in your appplication module

import { WalkthroughModule } from 'ngx-walkthrough';

then declare it in your app imports:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { WalkthroughModule } from 'ngx-walkthrough';

@NgModule({
  imports: [
    BrowserModule,
    WalkthroughModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

You can now use the component, add the element to your HTML:

<ngx-walkthrough [walkthrough-type]="'X'">
  ...
</ngx-walkthrough>

and use one of the two configurations: 1> Place any HTML code as you like instead of the three dotes as this uses the Angular transclude ability. Make sure to specify [walkthrough-type]="transparency" or "tip" for this to work. 2> Use the additional optional properties the component has to quickly create a walkthrough screen.

Usage Example 1 - transparency Non transclude option

<ngx-walkthrough
            [is-round]="true"
            [walkthrough-type]="'transparency'"
            [focus-element-selector]="'#focusItem'"
            [icon]="'single_tap'"
            [main-caption]="'This is some text'"
            [is-active]="true"
            [use-button]="true">
</ngx-walkthrough>

Usage Example 2 - transparency using transclude option

<ngx-walkthrough [is-active]="true" [walkthrough-type]="'transparency'">
  <img src="https://github.com/Altaba77/ngx-walkthrough/raw/master/images/ImageTutorialExample.png" style="height: 100vh; width: 100%;">
</ngx-walkthrough>

Usage Example 3 - tip type walkthrough

<ngx-walkthrough
            [walkthrough-type]="'tip'"
            [icon]="'images/myLogo.png'"
            [tip-icon-location]="'FRONT'"
            [tip-location]="'TOP'"
            [main-caption]="'This is some text'"
            [tip-color]="'BLACK'"
            [is-active]="true"
            [use-button]="true">
</ngx-walkthrough>

Usage Example 4 - transparency Non transclude option full code with output

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  template: `
    <walkthrough
                [is-round]="true"
                [walkthrough-type]="'transparency'"
                [focus-element-selector]="'#focusItem'"
                [icon]="'arrow'"
                [main-caption]="'This is some text'"
                [is-active]="true"
                [use-button]="true"
                (on-walkthrough-show)="myShowFunction()"
                (on-walkthrough-hide)="myHideFunction()">
    </walkthrough>
  `
})
export class MyApp {
  constructor() {
  }
  myShowFunction(){
    console.log("show event");
  }
   myHideFunction(){
    console.log("hide event");
  }
}

component Attributes

Inputs:

Ouputs:

Testing

On going...

License

As Angular itself, this module is released under the permissive MIT license. Your contributions are always welcome.