🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple, configurable, localStorage-enabled feature tour component for Vue.js app.

Other

Documentation

tour-component

Dependency Status devDependency Status Build Status: Linux Build Status: Windows npm version Downloads type-coverage

A vuejs, reactjs and angular tour component.

features

  • vuejs component
  • reactjs component
  • angular component
  • highlight target element
  • scroll to target

link css

<link rel="stylesheet" href="./node_modules/tour-component/dist/tour.min.css" />

vuejs component

gzip size

npm i vue-tour-component

import "vue-tour-component";

or

<script src="./node_modules/vue/dist/vue.min.js"></script> <script src="./node_modules/vue-class-component/dist/vue-class-component.min.js"></script> <script src="./node_modules/vue-tour-component/dist/vue-tour-component.min.js"></script>
<tour :data="data"     @update="update($event)"> </tour>

the online demo: https://plantain-00.github.io/tour-component/packages/vue/demo

reactjs component

gzip size

npm i react-tour-component

import { Tour } from "react-tour-component";

or

<script src="./node_modules/react/umd/react.production.min.js"></script> <script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script> <script src="./node_modules/react-tour-component/dist/react-tour-component.min.js"></script>
<Tour data={this.data}     update={e => this.update(e)}> </Tour>

the online demo: https://plantain-00.github.io/tour-component/packages/react/demo

angular component

npm i angular-tour-component

import { TourModule } from "angular/tour-component";  @NgModule({     imports: [BrowserModule, FormsModule, TourModule],     declarations: [MainComponent],     bootstrap: [MainComponent], }) class MainModule { }
<tour [data]="data"     (update)="update($event)"> </tour>

the online demo: https://plantain-00.github.io/tour-component/packages/angular/demo/jit

the AOT online demo: https://plantain-00.github.io/tour-component/packages/angular/demo/aot

properties and events of the component

name type description
data TourData[] the data of the tour
update (index: number)=> void triggered when press next or close

tour data structure

type TourData = {     steps: Step[],     localStorageKey: string;     index: number; };  type Step = {     left?: string | (() => string);     right?: string | (() => string);     top?: string | (() => string);     bottom?: string | (() => string);     direction: "left" | "right" | "top" | "bottom";     content: string;     next: string;     scrollTop?: number;     targetElementId?: string; };

change log

# v5 npm i tour-component  # v6 npm i vue-tour-component npm i react-tour-component npm i angular-tour-component
// v5 import "tour-component/vue"; import { Tour } from "tour-component/react"; import { TourModule } from "tour-component/angular";  // v6 import "vue-tour-component"; import { Tour } from "react-tour-component"; import { TourModule } from "angular-tour-component";
// v5 <link rel="stylesheet" href="./node_modules/tour-component/tour.min.css" />  // v6 <link rel="stylesheet" href="./node_modules/tour-component/dist/tour.min.css" />
// v4 angular AOT: import { TourModule } from "tour-component/angular";  // v5 angular AOT: import { TourModule } from "tour-component/aot/angular";
// v4 import "tour-component/vue";  // v3 import "tour-component/dist/vue";
// v2 to v3 move `index` into `data` from as a property
// v1 to v2 move `index` out from `data` as a property add `update` event

You May Also Like