vue-tour-component v7.0.0

tour-component

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

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

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

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