# WeaDriver

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

A user experience boot. [试一试](https://wea-driver.netlify.com/)

[![Demo](http://ww1.sinaimg.cn/large/006g8Dvggy1g12f518v6lj30tv08o0ub.jpg)](https://wea-driver.netlify.com/)

## Guide

### CDN

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

### NPM

``` npm
npm install --save wea-driver
```

```js
import WeaDriver from "wea-driver";
```

## Usage

```js
const STEPS = [
  {
    element: '#step1',
    popover: {
      title: '步骤一',
      description: '天青色等烟雨，而我在等你，岁月被打捞起，掩盖了结局。',
      position: 'left'
    },
    onNext: fucntion() {
      return new Promise(function(resolve, reject) {
        if() {
          // to do sth
          resolve();
        } else {
          // to do sth
          reject();
        }
      })
    }
  },
  ...
];
const myWeaDriver = new WeaDriver(STEPS);
myWeaDriver.init();
```

## Options

| Name | Type | Descript |
| ------- | -------- | -------- |
| element | String | 步骤区块的 `id` |
| title | String | 步骤区块的描述文本 |
| description | String | 步骤区块的显示位置 |
| onNext | Function(Promise) | 点击下一步时执行异步回调 |
| onPrevious | Function(Promise) | 点击上一步时执行异步回调 |

## Functions

.init()

> 初始化

.next()

> 下一步

.prev()

> 上一步

.reset(steps)

> 重置

.start()

> 开始

## Deploy

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/weanet/weax-site)