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
| 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
