uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-user-guide-demo-basic","tags":[],"filepath":"site/components/user-guide/demo/basic.md","directory":"components/user-guide/demo","filename":"basic","meta":{"title":"基本使用","description":"\n新功能引导\n","order":"0","filepath":"site/components/user-guide/demo/basic.md","filename":"basic","directory":"components/user-guide/demo","id":"components-user-guide-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcoreUserGuide = require('uxcore-user-guide');\n\nvar _uxcoreUserGuide2 = _interopRequireDefault(_uxcoreUserGuide);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar demoUserGuide = _uxcoreUserGuide2.default.getWithKey('demo');\n\nvar Step1 = demoUserGuide.addUserGuide({\n dom: 'button',\n step: 1,\n title: '我是第一步提示',\n content: '这是一段说明文字，用来补充描述内容',\n contentType: 'TEXT',\n type: 'ReactComponent'\n});\n\ndemoUserGuide.addUserGuide({\n step: 2,\n title: '我是第二步的提示，指定了DIV和图片',\n contentType: 'IMAGE',\n content: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532967222590&di=18571ba9affc82987a08966098a75b26&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F267f9e2f07082838304837cfb499a9014d08f1a0.jpg',\n type: 'HTMLElementMaker',\n getDom: function getDom() {\n return document.getElementById('justTestIt');\n }\n});\n\ndemoUserGuide.addUserGuide({\n step: 3,\n title: '我是第三步的提示，我也没有对应的DOM，指定了视频',\n contentType: 'VIDEO',\n content: 'http://techslides.com/demos/sample-videos/small.mp4',\n poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532968252286&di=702ee1cb712c50b7f41ba87ac6707737&imgtype=0&src=http%3A%2F%2Fp0.qhimgs4.com%2Ft01383c80228884eb05.jpg'\n});\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'componentDidMount',\n value: function componentDidMount() {\n demoUserGuide.start();\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { className: 'fn-clear' },\n React.createElement(\n Step1,\n { onClick: function onClick() {\n return demoUserGuide.start();\n } },\n '\\u6D4B\\u8BD5\\u7684\\u6309\\u94AE'\n ),\n React.createElement(\n 'div',\n { id: 'justTestIt', style: { display: 'inline-block', float: 'right', marginTop: 50 } },\n '\\u6211\\u662F\\u4E00\\u4E2A\\u6D4B\\u8BD5holder'\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-user-guide-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import UserGuide from 'uxcore-user-guide';\n\nconst demoUserGuide = UserGuide.getWithKey('demo');\n\nconst Step1 = demoUserGuide.addUserGuide({\n dom: 'button',\n step: 1,\n title: '我是第一步提示',\n content: '这是一段说明文字，用来补充描述内容',\n contentType: 'TEXT',\n type: 'ReactComponent',\n});\n\ndemoUserGuide.addUserGuide({\n step: 2,\n title: '我是第二步的提示，指定了DIV和图片',\n contentType: 'IMAGE',\n content: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532967222590&di=18571ba9affc82987a08966098a75b26&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F267f9e2f07082838304837cfb499a9014d08f1a0.jpg',\n type: 'HTMLElementMaker',\n getDom() {\n return document.getElementById('justTestIt');\n },\n});\n\ndemoUserGuide.addUserGuide({\n step: 3,\n title: '我是第三步的提示，我也没有对应的DOM，指定了视频',\n contentType: 'VIDEO',\n content: 'http://techslides.com/demos/sample-videos/small.mp4',\n poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532968252286&di=702ee1cb712c50b7f41ba87ac6707737&imgtype=0&src=http%3A%2F%2Fp0.qhimgs4.com%2Ft01383c80228884eb05.jpg',\n});\n\nclass Demo extends React.Component {\n componentDidMount() {\n demoUserGuide.start();\n }\n\n render() {\n return (\n <div className=\"fn-clear\">\n <Step1 onClick={() => demoUserGuide.start()}>测试的按钮</Step1>\n <div id=\"justTestIt\" style={{ display: 'inline-block', float: 'right', marginTop: 50 }}>我是一个测试holder</div>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-user-guide-demo-basic'));</code></pre></div>"},"status":"public","toc":""}]

基本使用

新功能引导

import UserGuide from 'uxcore-user-guide';

const demoUserGuide = UserGuide.getWithKey('demo');

const Step1 = demoUserGuide.addUserGuide({
  dom: 'button',
  step: 1,
  title: '我是第一步提示',
  content: '这是一段说明文字，用来补充描述内容',
  contentType: 'TEXT',
  type: 'ReactComponent',
});

demoUserGuide.addUserGuide({
  step: 2,
  title: '我是第二步的提示，指定了DIV和图片',
  contentType: 'IMAGE',
  content: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532967222590&di=18571ba9affc82987a08966098a75b26&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F267f9e2f07082838304837cfb499a9014d08f1a0.jpg',
  type: 'HTMLElementMaker',
  getDom() {
    return document.getElementById('justTestIt');
  },
});

demoUserGuide.addUserGuide({
  step: 3,
  title: '我是第三步的提示，我也没有对应的DOM，指定了视频',
  contentType: 'VIDEO',
  content: 'http://techslides.com/demos/sample-videos/small.mp4',
  poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532968252286&di=702ee1cb712c50b7f41ba87ac6707737&imgtype=0&src=http%3A%2F%2Fp0.qhimgs4.com%2Ft01383c80228884eb05.jpg',
});

class Demo extends React.Component {
  componentDidMount() {
    demoUserGuide.start();
  }

  render() {
    return (
      <div className="fn-clear">
        <Step1 onClick={() => demoUserGuide.start()}>测试的按钮</Step1>
        <div id="justTestIt" style={{ display: 'inline-block', float: 'right', marginTop: 50 }}>我是一个测试holder</div>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-user-guide-demo-basic'));

用户引导，当产品上线了新功能，用户第一次接触时，用一种分步骤聚焦引导的交互告诉用户新的功能点或功能变化。

Usage

一个产品或者页面中可能有多个引导，需要通过提供一个独立的 key 给工厂方法 getWithKey 来返回一个独立的实例。

import UserGuide from 'uxcore-user-guide';

const demoUserGuide = UserGuide.getWithKey('demo');

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

使用React HOC

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

使用DOM

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

使用一个函数返回DOM

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

使用图片

demoUserGuide.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,
});

需要开始引导时，请调用 start 方法

demoUserGuide.start();