组件演示

[{"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<p>新功能引导</p>\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\"><span class=\"hljs-keyword\">import</span> UserGuide <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-user-guide'</span>;\n\n<span class=\"hljs-keyword\">const</span> demoUserGuide = UserGuide.getWithKey(<span class=\"hljs-string\">'demo'</span>);\n\n<span class=\"hljs-keyword\">const</span> Step1 = demoUserGuide.addUserGuide({\n dom: <span class=\"hljs-string\">'button'</span>,\n step: <span class=\"hljs-number\">1</span>,\n title: <span class=\"hljs-string\">'我是第一步提示'</span>,\n content: <span class=\"hljs-string\">'这是一段说明文字,用来补充描述内容'</span>,\n contentType: <span class=\"hljs-string\">'TEXT'</span>,\n type: <span class=\"hljs-string\">'ReactComponent'</span>,\n});\n\ndemoUserGuide.addUserGuide({\n step: <span class=\"hljs-number\">2</span>,\n title: <span class=\"hljs-string\">'我是第二步的提示,指定了DIV和图片'</span>,\n contentType: <span class=\"hljs-string\">'IMAGE'</span>,\n content: <span class=\"hljs-string\">'https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1532967222590&amp;di=18571ba9affc82987a08966098a75b26&amp;imgtype=0&amp;src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F267f9e2f07082838304837cfb499a9014d08f1a0.jpg'</span>,\n type: <span class=\"hljs-string\">'HTMLElementMaker'</span>,\n getDom() {\n <span class=\"hljs-keyword\">return</span> <span class=\"hljs-built_in\">document</span>.getElementById(<span class=\"hljs-string\">'justTestIt'</span>);\n },\n});\n\ndemoUserGuide.addUserGuide({\n step: <span class=\"hljs-number\">3</span>,\n title: <span class=\"hljs-string\">'我是第三步的提示,我也没有对应的DOM,指定了视频'</span>,\n contentType: <span class=\"hljs-string\">'VIDEO'</span>,\n content: <span class=\"hljs-string\">'http://techslides.com/demos/sample-videos/small.mp4'</span>,\n poster: <span class=\"hljs-string\">'https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1532968252286&amp;di=702ee1cb712c50b7f41ba87ac6707737&amp;imgtype=0&amp;src=http%3A%2F%2Fp0.qhimgs4.com%2Ft01383c80228884eb05.jpg'</span>,\n});\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n componentDidMount() {\n demoUserGuide.start();\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"fn-clear\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step1</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{()</span> =&gt;</span> demoUserGuide.start()}&gt;测试的按钮<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Step1</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">id</span>=<span class=\"hljs-value\">\"justTestIt\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">display:</span> '<span class=\"hljs-attribute\">inline-block</span>', <span class=\"hljs-attribute\">float:</span> '<span class=\"hljs-attribute\">right</span>', <span class=\"hljs-attribute\">marginTop:</span> <span class=\"hljs-attribute\">50</span> }}&gt;</span>我是一个测试holder<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-user-guide-demo-basic'));</span></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();