Skip to content
A vuejs, reactjs and angular tour component.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
packages
screenshots
spec
.browserslistrc
.editorconfig
.gitignore
.markdownlint.json
.stylelintrc
.travis.yml
CODE_OF_CONDUCT.md
LICENSE
NOTICE.txt
README.md
appveyor.yml
clean-scripts.config.js
commitlint.config.js
lerna.json
package.json
postcss.config.js
rev-static.config.js
tsconfig.base.json
tslint.json
yarn.lock

README.md

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 can’t perform that action at this time.