uxcore-user-guide

uxcore-user-guide

React user guide

Development

git clone https://github.com/uxcore/uxcore-aito-user-guide
cd uxcore-aito-user-guide
npm install
npm run server

if you'd like to save your install time，you can use uxcore-tools globally.

npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-aito-user-guide
cd uxcore-aito-user-guide
npm install
npm run dep
npm run start

Test Case

npm run test

Coverage

npm run coverage

Demo

http://uxcore.alibaba.net/components/uxcore-aito-user-guide?type=others

Contribute

Yes please! See the CONTRIBUTING for details.

使用方法

一个产品或者页面中可能有多个引导，需要给每个引导做一个key

const UserGuide = require('uxcore-user-guide').getWithKey('guide-key', {
  // config here
  // prefixCls,
  // className
});

然后给这个引导添加步骤，每个步骤可以有4种选择

• 使用React HOC

const Step1 = UserGuide.addUserGuide({
  dom: 'button',
  step: 1,
  hint: '我是第一步提示',
  type: 'ReactComponent',
});

• 使用DOM

const Step1 = UserGuide.addUserGuide({
  dom: document.getElementById('app'),
  step: 2,
  hint: '我是第二步提示',
  type: 'HTMLElement',
});

• 使用一个函数返回DOM

const Step1 = UserGuide.addUserGuide({
  getDom() { return document.getElementById('app'); },
  step: 3,
  hint: '我是第三步提示',
  type: 'HTMLElementMaker',
});

• 使用图片

UserGuide.addUserGuide({
  step: 4,
  hint: '我是第四步的提示，我也没有对应的DOM',
  type: 'Image',
  top: 1800,
  left: 1000,
  image: 'https://img.alicdn.com/tfs/TB1TRNAllfH8KJjy1XbXXbLdXXa-240-240.png',
  imageHeight: 120,
  imageWidth: 120,
});

需要开始引导时，需要

UserGuide.start('guide-key');