# WeaToolIntro

[![](https://data.jsdelivr.com/v1/package/npm/wea-tool-intro/badge)](https://www.jsdelivr.com/package/npm/wea-tool-intro) 

Based the [introjs](https://github.com/usablica/intro.js), a user experience boot. [Demo](https://wea-tool-intro.netlify.com/)

![Demo](http://ww1.sinaimg.cn/large/006g8Dvggy1g12f518v6lj30tv08o0ub.jpg)

## Guide

### CDN

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wea-tool-intro@2.1.0/dist/wea-tool-intro.min.css">
<script src="https://cdn.jsdelivr.net/npm/wea-tool-intro@2.1.0/dist/wea-tool-intro.min.js"></script>
```

### NPM

``` npm
npm install --save wea-tool-intro
```

```js
import WeaToolIntro from "wea-tool-intro";
```

## Usage

```js

var myWeaToolIntro = new WeaToolIntro([
  {
    element: "#step1",
    intro: "<h6>步骤一</h6>天青色等烟雨，而我在等你，岁月被打捞起，掩盖了结局。",
    position: "right",
    event: function() {
      console.log("step1");
    }
  },
  ...
]);
myWeaToolIntro.start();
```

## Parameter

| Name | Type | Descript |
| ------- | -------- | -------- |
| element | String | 步骤区块的 `id` |
| intro | String | 步骤区块的描述文本 |
| position | String | 步骤区块的显示位置 |
| event | Function | 当前步骤切换时触发的事件 |

## Deploy

[![Netlify Status](https://api.netlify.com/api/v1/badges/6e3a98e6-65b6-4581-9521-915323484097/deploy-status)](https://app.netlify.com/sites/wea-tool-intro/deploys)