uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-float-nav-demo-basic","tags":[],"filepath":"site/components/float-nav/demo/basic.md","directory":"components/float-nav/demo","filename":"basic","meta":{"title":"基本使用","description":"\n基本用法。\n","order":"0","filepath":"site/components/float-nav/demo/basic.md","filename":"basic","directory":"components/float-nav/demo","id":"components-float-nav-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 _uxcore = require('uxcore');\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 NavItem = _uxcore.FloatNav.NavItem;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n _this.handleClick = _this.handleClick.bind(_this);\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleClick',\n value: function handleClick(link, orderNumber) {\n console.log('handleClick', link, orderNumber);\n }\n }, {\n key: 'renderArticle',\n value: function renderArticle() {\n return React.createElement(\n 'div',\n {\n className: 'article',\n style: {\n marginRight: '200px',\n fontSize: '14px'\n }\n },\n React.createElement(\n 'h1',\n null,\n '\\u5510\\u7EB3\\u5FB7\\xB7\\u7279\\u6717\\u666E'\n ),\n React.createElement(\n 'div',\n null,\n '\\u5510\\u7EB3\\u5FB7\\xB7\\u7279\\u6717\\u666E\\uFF0C\\u7B2C45\\u4EFB\\u7F8E\\u56FD\\u603B\\u7EDF\\uFF0C1946\\u5E746\\u670814\\u65E5\\u751F\\u4E8E\\u7F8E\\u56FD\\u7EBD\\u7EA6\\uFF0C\\u653F\\u6CBB\\u5BB6\\u3001\\u5546\\u4EBA\\u3001\\u4F5C\\u5BB6\\u3001\\u4E3B\\u6301\\u4EBA\\u3002\\u7279\\u6717\\u666E1968\\u5E74\\u4ECE\\u5BBE\\u5915\\u6CD5\\u5C3C\\u4E9A\\u5927\\u5B66\\u6C83\\u987F\\u5546\\u5B66\\u9662\\u6BD5\\u4E1A\\u540E\\uFF0C\\u8FDB\\u5165\\u5176\\u7236\\u7684\\u623F\\u5730\\u4EA7\\u516C\\u53F8\\u5DE5\\u4F5C\\uFF0C\\u5E76\\u57281971\\u5E74\\u5F00\\u59CB\\u638C\\u7BA1\\u516C\\u53F8\\u8FD0\\u8425\\u3002\\u5728\\u968F\\u540E\\u51E0\\u5341\\u5E74\\u95F4\\uFF0C\\u7279\\u6717\\u666E\\u5F00\\u59CB\\u5EFA\\u7ACB\\u81EA\\u5DF1\\u7684\\u623F\\u5730\\u4EA7\\u738B\\u56FD\\uFF0C\\u4EBA\\u79F0\\u201C\\u5730\\u4EA7\\u4E4B\\u738B\\u201D\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n '\\u9664\\u623F\\u5730\\u4EA7\\u5916\\uFF0C\\u7279\\u6717\\u666E\\u5C06\\u6295\\u8D44\\u8303\\u56F4\\u5EF6\\u4F38\\u5230\\u5176\\u4ED6\\u884C\\u4E1A\\uFF0C\\u5305\\u62EC\\u5F00\\u8BBE\\u8D4C\\u573A\\u3001\\u9AD8\\u5C14\\u592B\\u7403\\u573A\\u7B49\\u3002\\u4ED6\\u8FD8\\u6D89\\u8DB3\\u5A31\\u4E50\\u754C\\uFF0C\\u662F\\u7F8E\\u56FD\\u771F\\u4EBA\\u79C0\\u300A\\u540D\\u4EBA\\u5B66\\u5F92\\u300B\\u7B49\\u7535\\u89C6\\u8282\\u76EE\\u7684\\u4E3B\\u6301\\u4EBA\\uFF0C\\u5E76\\u62C5\\u4EFB\\u201C\\u73AF\\u7403\\u5C0F\\u59D0\\u201D\\u9009\\u7F8E\\u5927\\u8D5B\\u4E3B\\u5E2D\\u3002\\u7F8E\\u56FD\\u6742\\u5FD7\\u300A\\u798F\\u5E03\\u65AF\\u300B\\u5728\\u53BB\\u5E746\\u6708\\u8BC4\\u4F30\\u7279\\u6717\\u666E\\u8D44\\u4EA7\\u51C0\\u503C\\u7EA6\\u4E3A45\\u4EBF\\u7F8E\\u5143\\uFF0C\\u7279\\u6717\\u666E\\u5219\\u79F0\\u8D85\\u8FC7100\\u4EBF\\u7F8E\\u5143\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n '\\u7279\\u6717\\u666E\\u5728\\u8FC7\\u53BB20\\u5E74\\u95F4\\u5206\\u522B\\u652F\\u6301\\u8FC7\\u5171\\u548C\\u515A\\u548C\\u6C11\\u4E3B\\u515A\\u5404\\u4E3B\\u8981\\u603B\\u7EDF\\u7ADE\\u9009\\u8005\\u30022015\\u5E746\\u6708\\uFF0C\\u7279\\u6717\\u666E\\u4EE5\\u5171\\u548C\\u515A\\u7ADE\\u9009\\u8005\\u8EAB\\u4EFD\\u6B63\\u5F0F\\u53C2\\u52A02016\\u5E74\\u7F8E\\u56FD\\u603B\\u7EDF\\u9009\\u4E3E\\u3002\\u6B64\\u524D\\uFF0C\\u7279\\u6717\\u666E\\u6CA1\\u6709\\u62C5\\u4EFB\\u8FC7\\u516C\\u5171\\u804C\\u52A1\\u3002\\u7279\\u6717\\u666E\\u7ED3\\u8FC73\\u6B21\\u5A5A\\uFF0C\\u80B2\\u67095\\u4E2A\\u5B50\\u5973\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n '2016\\u5E7411\\u67089\\u65E5\\uFF0C\\u7F8E\\u56FD\\u5927\\u9009\\u8BA1\\u7968\\u7ED3\\u679C\\u663E\\u793A\\uFF1A\\u5171\\u548C\\u515A\\u5019\\u9009\\u4EBA\\u5510\\u7EB3\\u5FB7\\xB7\\u7279\\u6717\\u666E\\u5DF2\\u83B7\\u5F97\\u4E86276\\u5F20\\u9009\\u4E3E\\u4EBA\\u7968\\uFF0C\\u8D85\\u8FC7270\\u5F20\\u9009\\u4E3E\\u4EBA\\u7968\\u7684\\u83B7\\u80DC\\u6807\\u51C6\\uFF0C\\u5F53\\u9009\\u7F8E\\u56FD\\u7B2C45\\u4EFB\\u603B\\u7EDF\\u3002\\u5510\\u7EB3\\u5FB7\\xB7\\u7279\\u6717\\u666E\\u4E8E\\u5F53\\u5730\\u65F6\\u95F42017\\u5E741\\u670820\\u65E5\\u4E2D\\u5348\\u5728\\u7F8E\\u56FD\\u9996\\u90FD\\u534E\\u76DB\\u987F\\u5BA3\\u8A93\\u5C31\\u804C\\uFF0C\\u6B63\\u5F0F\\u6210\\u4E3A\\u7F8E\\u56FD\\u7B2C45\\u4EFB\\u603B\\u7EDF\\u3002'\n ),\n React.createElement(\n 'h2',\n { id: 'p1' },\n '\\u4EBA\\u7269\\u7ECF\\u5386'\n ),\n React.createElement(\n 'h3',\n { id: 'p1-1' },\n '\\u521B\\u4E1A\\u7ECF\\u5386'\n ),\n React.createElement(\n 'div',\n null,\n '1946\\u5E746\\u670814\\u65E5\\uFF0C\\u7279\\u6717\\u666E\\u5728\\u7EBD\\u7EA6\\u5E02\\u51FA\\u751F\\uFF0C\\u6392\\u884C\\u8001\\u4E8C\\uFF0C\\u4E0A\\u6709\\u4E00\\u4E2A\\u59D0\\u59D0\\uFF0C\\u4E0B\\u6709\\u4E24\\u4E2A\\u5F1F\\u5F1F\\u3001\\u4E00\\u4E2A\\u59B9\\u59B9\\u3002\\u7531\\u4E8E\\u7956\\u7236\\u82F1\\u5E74\\u65E9\\u901D\\uFF0C\\u7236\\u4EB2\\u4E3A\\u5E2E\\u52A9\\u5BB6\\u8BA1\\uFF0C\\u751A\\u65E9\\u5373\\u51B3\\u610F\\u521B\\u4E1A\\uFF0C\\u53D1\\u73B0\\u623F\\u5730\\u4EA7\\u751F\\u610F\\u9887\\u5177\\u201C\\u94B1\\u201D\\u9014\\uFF0C\\u9042\\u521B\\u8BBE\\u201C\\u7279\\u6717\\u666E\\u516C\\u53F8\\u201D\\uFF0C\\u4E13\\u95E8\\u5728\\u7EBD\\u7EA6\\u5E02\\u7687\\u540E\\u533A\\u53CA\\u90BB\\u8FD1\\u5730\\u533A\\u5174\\u5EFA\\u5E76\\u7ECF\\u8425\\u4E2D\\u578B\\u516C\\u5BD3\\uFF0C\\u4F9B\\u4E00\\u822C\\u6C11\\u4F17\\u79DF\\u8D41\\u6216\\u8D2D\\u4E70\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n '\\u5728\\u7236\\u6BCD\\u4EB2\\u53CB\\u7684\\u7231\\u5FC3\\u5475\\u62A4\\u4E0B\\uFF0C\\u7279\\u6717\\u666E\\u81EA\\u5E7C\\u5373\\u6EE1\\u8179\\u81EA\\u4FE1\\uFF0C\\u6D3B\\u529B\\u56DB\\u5C04\\uFF0C\\u65E0\\u6CD5\\u9759\\u4E0B\\u6765\\u7528\\u529F\\u8BFB\\u4E66\\u300213\\u5C81\\u90A3\\u5E74\\uFF0C\\u7236\\u6BCD\\u53EA\\u597D\\u9001\\u4ED6\\u53BB\\u201C\\u7EBD\\u7EA6\\u519B\\u4E8B\\u5B66\\u6821\\u201D\\u6C42\\u5B66\\uFF0C\\u5180\\u671B\\u519B\\u6821\\u7684\\u4E25\\u683C\\u8BAD\\u7EC3\\u80FD\\u5E2E\\u52A9\\u4ED6\\u529B\\u4E89\\u4E0A\\u6E38\\u3002\\u5728\\u519B\\u6821\\u5C31\\u8BFB\\u671F\\u95F4\\uFF0C\\u7279\\u6717\\u666E\\u4EBA\\u7F18\\u751A\\u4F73\\uFF0C\\u4E0D\\u4EC5\\u5B66\\u4E1A\\u6210\\u7EE9\\u4F18\\u5F02\\uFF0C\\u4E5F\\u662F\\u8FD0\\u52A8\\u5065\\u5C06\\uFF0C1964\\u5E74\\u81EA\\u519B\\u6821\\u6BD5\\u4E1A\\u65F6\\uFF0C\\u9886\\u8896\\u6C14\\u8D28\\u5DF2\\u9690\\u7136\\u6210\\u5F62\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n '\\u79BB\\u5F00\\u519B\\u6821\\u540E\\uFF0C\\u7279\\u6717\\u666E\\u83B7\\u51C6\\u8FDB\\u5165\\u96B6\\u5C5E\\u5E38\\u6625\\u85E4\\u8054\\u76DF\\u7684\\u5BBE\\u5915\\u6CD5\\u5C3C\\u4E9A\\u5927\\u5B66\\u6C83\\u987F\\u5546\\u5B66\\u9662\\u5C31\\u8BFB\\u3002\\u5927\\u5B66\\u65F6\\u4EE3\\uFF0C\\u7279\\u6717\\u666E\\u5B5C\\u5B5C\\u4E0D\\u5026\\u5730\\u6C72\\u53D6\\u5546\\u4E1A\\u9886\\u57DF\\u65B0\\u77E5\\uFF0C\\u57F9\\u517B\\u673A\\u654F\\u751F\\u610F\\u773C\\u5149\\uFF0C\\u52A0\\u4E0A\\u7236\\u4EB2\\u8033\\u63D0\\u9762\\u547D\\u7684\\u7ECF\\u8425\\u79D8\\u8BC0\\uFF0C\\u5927\\u56DB\\u65F6\\uFF0C\\u5DF2\\u8822\\u8822\\u6B32\\u52A8\\uFF0C\\u6B32\\u5728\\u5546\\u754C\\u95EF\\u51FA\\u4E00\\u7247\\u5929\\u3002\\u4ED6\\u4E0D\\u65F6\\u53BB\\u56FD\\u5916\\u8003\\u5BDF\\u6700\\u65B0\\u4E0E\\u672A\\u6765\\u7684\\u7ECF\\u6D4E\\u8D70\\u5411\\uFF0C\\u6DF1\\u5207\\u4F53\\u8BA4\\u73B0\\u4ECA\\u6700\\u91CD\\u8981\\u7684\\u4F01\\u4E1A\\u7ECF\\u8425\\u6218\\u7565\\u5C31\\u662F\\u201C\\u5E02\\u573A\\u8425\\u9500\\u201D\\u3002'\n ),\n React.createElement(\n 'h3',\n { id: 'p1-2' },\n '\\u53C2\\u9009\\u603B\\u7EDF'\n ),\n React.createElement(\n 'div',\n null,\n '\\u5510\\u7EB3\\u5FB7\\xB7\\u7279\\u6717\\u666E\\u66FE\\u7ECF\\u79EF\\u6781\\u6D3B\\u52A8\\u4EE5\\u8D62\\u5F972012\\u5E74\\u7F8E\\u56FD\\u603B\\u7EDF\\u9009\\u4E3E\\u5171\\u548C\\u515A\\u7684\\u63D0\\u540D\\uFF0C\\u6311\\u6218\\u5DF4\\u62C9\\u514B\\xB7\\u5965\\u5DF4\\u9A6C\\uFF0C\\u4ED6\\u8FD8\\u56E0\\u4E3A\\u8D28\\u7591\\u5965\\u5DF4\\u9A6C\\u603B\\u7EDF\\u662F\\u5426\\u5728\\u7F8E\\u56FD\\u51FA\\u751F\\u800C\\u5F15\\u8D77\\u5173\\u6CE8\\u3002\\u5965\\u5DF4\\u9A6C\\u603B\\u7EDF\\u4E3A\\u4E86\\u7ED3\\u675F\\u8FD9\\u573A\\u4E89\\u8BAE\\uFF0C\\u4E0D\\u5F97\\u4E0D\\u516C\\u5E03\\u4E86\\u4ED6\\u7684\\u51FA\\u751F\\u8BC1\\u3002\\u4F46\\u662F\\u4ED6\\u4E2D\\u9014\\u5BA3\\u5E03\\u9000\\u51FA\\u7F8E\\u56FD\\u603B\\u7EDF\\u9009\\u4E3E\\u5171\\u548C\\u515A\\u7684\\u63D0\\u540D\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n '2015\\u5E746\\u670817\\u65E5\\uFF0C\\u7279\\u6717\\u666E\\u5728\\u7EBD\\u7EA6\\u5E02\\u7B2C\\u4E94\\u5927\\u9053\\u7279\\u6717\\u666E\\u5927\\u53A6\\u5BA3\\u5E03\\uFF0C\\u51B3\\u5B9A\\u53C2\\u52A0\\u603B\\u7EDF\\u5927\\u9009\\u3002\\u201C\\u6211\\u6B63\\u5F0F\\u5BA3\\u5E03\\u53C2\\u52A0\\u7F8E\\u56FD\\u603B\\u7EDF\\u7ADE\\u9009\\uFF0C\\u6211\\u4EEC\\u8981\\u8BA9\\u7F8E\\u56FD\\u518D\\u6B21\\u5F3A\\u5927\\u8D77\\u6765\\uFF01\\u201D'\n ),\n React.createElement(\n 'div',\n null,\n '\\u7279\\u6717\\u666E\\u662F\\u7B2C12\\u4F4D\\u5BA3\\u5E03\\u53C2\\u52A02016\\u5E74\\u603B\\u7EDF\\u7ADE\\u9009\\u7684\\u5171\\u548C\\u515A\\u4EBA\\u3002'\n ),\n React.createElement(\n 'h3',\n { id: 'p1-3' },\n '\\u5BA3\\u8A93\\u5C31\\u804C'\n ),\n React.createElement(\n 'div',\n null,\n '\\u5510\\u7EB3\\u5FB7\\xB7\\u7279\\u6717\\u666E\\u4E8E\\u5F53\\u5730\\u65F6\\u95F42017\\u5E741\\u670820\\u65E5\\u4E2D\\u5348\\u5728\\u7F8E\\u56FD\\u9996\\u90FD\\u534E\\u76DB\\u987F\\u5BA3\\u8A93\\u5C31\\u804C\\uFF0C\\u6B63\\u5F0F\\u6210\\u4E3A\\u7F8E\\u56FD\\u7B2C45\\u4EFB\\u603B\\u7EDF\\u3002'\n ),\n React.createElement(\n 'h2',\n { id: 'p2' },\n '\\u591A\\u91CD\\u8EAB\\u4EFD'\n ),\n React.createElement(\n 'h3',\n { id: 'p2-1' },\n '\\u540D\\u4EBA'\n ),\n React.createElement(\n 'div',\n null,\n '\\u7279\\u6717\\u666E\\u7684\\u7A81\\u51FA\\u662F\\u56E0\\u4E3A\\u4ED6\\u6562\\u8BF4\\u6562\\u505A\\u3001\\u6562\\u505A\\u6562\\u5F53\\u7684\\u8A00\\u8C08\\u4E0E\\u884C\\u4E8B\\u98CE\\u683C\\uFF0C\\u52A0\\u4E0A\\u4ED6\\u7684\\u79C1\\u751F\\u6D3B\\u9887\\u5177\\u8DA3\\u5473\\u6027\\uFF0C\\u7279\\u6717\\u666E\\u4E0D\\u4EC5\\u66FE\\u662F\\u7F8E\\u56FD\\u300A\\u5546\\u4E1A\\u5468\\u520A\\u300B\\u5C01\\u9762\\u4EBA\\u7269\\uFF0C\\u4EA6\\u66FE\\u51FA\\u73B0\\u5728\\u5168\\u7F8E\\u6700\\u7545\\u9500\\u7684\\u516B\\u5366\\u6742\\u5FD7\\u300A\\u56FD\\u5BB6\\u8BE2\\u95EE\\u62A5\\u300B\\u7684\\u5934\\u6761\\u65B0\\u95FB\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n '\\u5510\\u7EB3\\u5FB7-\\u7279\\u6717\\u666E\\u7684\\u5BB6\\u4F4D\\u4E8E\\u7EBD\\u7EA6\\u7684\\u9AD8\\u5C1A\\u4F4F\\u5B85\\u533A\\uFF0C\\u5728\\u4ED6\\u8C6A\\u5B85\\u7684\\u5BA2\\u5385\\u4E2D\\u592E\\uFF0C\\u4F2B\\u7ACB\\u7740\\u5DE8\\u578B\\u7684\\u5927\\u7406\\u77F3\\u55B7\\u6CC9\\u3002\\u751F\\u6D3B\\u5962\\u4F88\\u7684\\u7279\\u6717\\u666E\\u4E5F\\u662F\\u7F8E\\u56FD\\u6700\\u62DB\\u6447\\u7684\\u5BCC\\u7FC1\\u3002\\u4ED6\\u5728\\u7EBD\\u7EA6\\u7B2C\\u4E94\\u5927\\u9053\\u516C\\u5BD3\\u7684\\u95E8\\u90FD\\u975E\\u5F97\\u9540\\u4E0A\\u9EC4\\u91D1\\uFF0C\\u4EE5\\u663E\\u793A\\u4ED6\\u662F\\u591A\\u4E48\\u4E0E\\u4F17\\u4E0D\\u540C\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n '\\u5168\\u7F8E\\u6563\\u5E03\\u7740\\u4EE5\\u4ED6\\u7684\\u540D\\u5B57\\u547D\\u540D\\u7684\\u9AD8\\u697C\\u5927\\u53A6\\u3001\\u6E38\\u8247\\u3002\\u7279\\u6717\\u666E\\u6210\\u4E3A\\u7F8E\\u56FD\\u4F20\\u5A92\\u70ED\\u8877\\u7684\\u4EBA\\u7269\\uFF0C\\u300A\\u95F4\\u8C0D\\u300B\\u6742\\u5FD7\\u5BA3\\u79F0\\u201C\\u7279\\u6717\\u666E\\u662F\\u4E00\\u4E2A\\u6D45\\u8584\\u5EB8\\u4FD7\\u7684\\u66B4\\u53D1\\u6237\\u201D\\uFF0C\\u800C\\u7F8E\\u56FD\\u8457\\u540D\\u8BBD\\u523A\\u8FDE\\u73AF\\u6F2B\\u753B\\u300A\\u675C\\u6069\\u65AF\\u6BD4\\u5229\\u300B\\u7684\\u4E3B\\u7F16\\u4E5F\\u628A\\u7279\\u6717\\u666E\\u4F5C\\u4E3A\\u5934\\u53F7\\u653B\\u51FB\\u5BF9\\u8C61\\u3002\\u4E0A\\u4E16\\u7EAA90\\u5E74\\u4EE3\\u521D\\u671F\\u7684\\u65F6\\u5019\\uFF0C\\u7279\\u6717\\u666E\\u4EF7\\u503C15\\u4EBF\\u7F8E\\u5143\\u5DE8\\u8D44\\u7684\\u5730\\u4EA7\\u738B\\u56FD\\u66FE\\u906D\\u9047\\u5DE8\\u5927\\u6ED1\\u94C1\\u5362\\uFF0C\\u4ED6\\u4E27\\u5931\\u4E862/3\\u7684\\u8D22\\u5BCC\\uFF0C1997\\u5E74\\u5374\\u4EE5\\u81EA\\u4F20\\u300A\\u7279\\u6717\\u666E\\uFF1A\\u56DE\\u5F52\\u7684\\u827A\\u672F\\u300B\\u800C\\u91CD\\u632F\\u96C4\\u98CE\\u3002'\n ),\n React.createElement(\n 'h3',\n { id: 'p2-2' },\n '\\u5BCC\\u7FC1'\n ),\n React.createElement(\n 'div',\n null,\n '\\u7279\\u6717\\u666E\\u7684\\u5A92\\u4F53\\u66DD\\u5149\\u7387\\u975E\\u5E38\\u9AD8\\uFF0C\\u559C\\u6B22\\u8DDF\\u6447\\u6EDA\\u660E\\u661F\\u4F3C\\u7684\\uFF0C\\u6BCF\\u6B21\\u4EAE\\u76F8\\u90FD\\u7F8E\\u5973\\u73AF\\u7ED5\\uFF0C\\u6240\\u4EE5\\u4ED6\\u4E5F\\u5C31\\u975E\\u5E38\\u559C\\u6B22\\u505A\\u8DDF\\u7F8E\\u5973\\u76F8\\u5173\\u7684\\u4E8B\\u60C5\\uFF0C\\u73AF\\u7403\\u5C0F\\u59D0\\u5927\\u8D5B\\u4E5F\\u6B63\\u662F\\u4ED6\\u548CNBC\\u4E00\\u8D77\\u652F\\u6301\\u7684\\u6D3B\\u52A8\\uFF1B\\u4ED6\\u8FD8\\u559C\\u6B22\\u548C\\u8D85\\u7EA7\\u6A21\\u7279\\u7ED3\\u5A5A\\u3002\\u5728\\u5DE5\\u4F5C\\u7E41\\u5FD9\\u3001\\u751F\\u6D3B\\u591A\\u5F69\\u591A\\u59FF\\u4E4B\\u4F59\\uFF0C\\u53C8\\u5F00\\u59CB\\u5BF9\\u4E8E\\u9009\\u7F8E\\u6D3B\\u52A8\\u4EA7\\u751F\\u6D53\\u539A\\u5174\\u8DA3\\uFF0C\\u9042\\u4E00\\u4E3E\\u4E70\\u4E0B\\u201C\\u73AF\\u7403\\u5C0F\\u59D0\\u201D\\u3001\\u201C\\u7F8E\\u56FD\\u5C0F\\u59D0\\u201D\\u548C\\u201C\\u7F8E\\u56FD\\u5999\\u9F84\\u5C0F\\u59D0\\u201D\\u9009\\u62D4\\u59D4\\u5458\\u4F1A\\u7684\\u652F\\u63F4\\u673A\\u6784\\u4E0E\\u4E3B\\u529E\\u6743\\uFF0C\\u6210\\u4E3A\\u8FD9\\u4E9B\\u9009\\u7F8E\\u6D3B\\u52A8\\u7684\\u540E\\u53F0\\u8001\\u677F\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n '\\u6B64\\u5916\\uFF0C\\u7279\\u6717\\u666E\\u5584\\u4E8E\\u4F5C\\u79C0\\uFF0C\\u8C19\\u719F\\u81EA\\u6211\\u5BA3\\u4F20\\u4E4B\\u9053\\u3002\\u7531\\u4E8E\\u592A\\u8FC7\\u62DB\\u6447\\uFF0C\\u7279\\u6717\\u666E\\u4E00\\u5EA6\\u88AB\\u8BA4\\u4E3A\\u662F\\u7F8E\\u56FD\\u6700\\u8BA8\\u4EBA\\u5ACC\\u7684\\u5BCC\\u7FC1\\u3002\\u8FD9\\u6B21\\u8282\\u76EE\\u64AD\\u51FA\\u65F6\\uFF0C\\u4E3A\\u663E\\u793A\\u4ED6\\u201C\\u738B\\u8005\\u5F52\\u6765\\u201D\\u7684\\u98CE\\u8303\\uFF0C\\u7279\\u6717\\u666E\\u8FD8\\u57283\\u670822\\u65E5\\u51FA\\u7248\\u7684\\u300A\\u7EBD\\u7EA6\\u65F6\\u62A5\\u300B\\u3001\\u300A\\u534E\\u76DB\\u987F\\u90AE\\u62A5\\u300B\\u4EE5\\u53CA\\u300A\\u534E\\u5C14\\u8857\\u65E5\\u62A5\\u300B\\u7B49\\u7F8E\\u56FD\\u4E3B\\u6D41\\u5A92\\u4F53\\u520A\\u767B\\u4E86\\u597D\\u51E0\\u4E2A\\u6574\\u7248\\u5E7F\\u544A\\uFF0C\\u91CD\\u70B9\\u63A8\\u4ECB\\u4ED6\\u7684\\u4E2A\\u4EBA\\u3001\\u4ED6\\u7684\\u516C\\u53F8\\u4EE5\\u53CA\\u4ED6\\u7684\\u4EA7\\u54C1\\u3002\\u7279\\u6717\\u666E\\u516C\\u53F8\\u7684\\u4EBA\\u58F0\\u79F0\\uFF0C\\u5982\\u4ECA\\u4ED6\\u4EEC\\u5E73\\u5747\\u6BCF\\u5929\\u4F1A\\u63A5\\u5230\\u8D85\\u8FC750\\u4E2A\\u9884\\u7EA6\\u91C7\\u8BBF\\u7684\\u7535\\u8BDD\\u3002'\n ),\n React.createElement(\n 'h3',\n { id: 'p2-3' },\n '\\u4F5C\\u5BB6'\n ),\n React.createElement(\n 'div',\n null,\n '\\u7279\\u6717\\u666E\\u662F\\u4E00\\u4F4D\\u975E\\u5E38\\u5A34\\u719F\\u7684\\u4F5C\\u5BB6\\u3002\\u4ED6\\u7684\\u7B2C\\u4E00\\u672C\\u81EA\\u4F20\\u300A\\u505A\\u751F\\u610F\\u7684\\u827A\\u672F\\u300B\\u662F\\u6BCF\\u4E2A\\u751F\\u610F\\u4EBA\\u7684\\u201C\\u5723\\u7ECF\\u201D\\uFF0C\\u5356\\u51FA\\u4E86300\\u591A\\u4E07\\u672C\\uFF0C\\u88AB\\u300A\\u7EBD\\u7EA6\\u65F6\\u62A5\\u300B\\u8BC4\\u4E3A\\u6700\\u7545\\u9500\\u7684\\u4E66\\u7C4D\\uFF0C\\u5E76\\u8FDE\\u7EED\\u5728\\u6392\\u884C\\u699C\\u4E0A\\u7EF4\\u6301\\u4E8632\\u661F\\u671F\\u7684\\u51A0\\u519B\\u5730\\u4F4D\\u3002\\u300A\\u7ED3\\u5C40\\uFF0C\\u98A0\\u5CF0\\u751F\\u5B58\\u300B\\u548C\\u4ED6\\u7684\\u7B2C\\u4E09\\u672C\\u4E66\\u300A\\u56DE\\u5F52\\u7684\\u827A\\u672F\\u300B\\u4E00\\u6837\\uFF0C\\u4E5F\\u662F\\u300A\\u7EBD\\u7EA6\\u65F6\\u62A5\\u300B\\u8BC4\\u51FA\\u7684\\u6700\\u4F73\\u4E66\\u7C4D\\u548C\\u6700\\u7545\\u9500\\u4E66\\u7C4D\\u7684\\u7B2C\\u4E00\\u540D\\u3002\\u7279\\u6717\\u666E\\u6700\\u65B0\\u7684\\u5C0F\\u8BF4\\u300A\\u7F8E\\u56FD\\uFF0C\\u503C\\u5F97\\u6211\\u4EEC\\u62E5\\u6709\\u300B\\u5F00\\u59CB\\u4E86\\u4ED6\\u6587\\u5B66\\u5316\\u7684\\u5199\\u4F5C\\u8DEF\\u7EBF\\u3002\\u7279\\u6717\\u666E\\u7684\\u4E66\\u4E0E\\u7F8E\\u56FD\\u6C11\\u4F17\\u7684\\u5DE5\\u4F5C\\u751F\\u6D3B\\u606F\\u606F\\u76F8\\u5173\\uFF0C\\u540C\\u65F6\\u4E5F\\u9610\\u8FF0\\u4E86\\u4ED6\\u5BF9\\u7F8E\\u56FD\\u653F\\u6CBB\\u3001\\u7ECF\\u6D4E\\u3001\\u6587\\u5316\\u7684\\u770B\\u6CD5\\uFF0C\\u8FD9\\u4E9B\\u90FD\\u662F\\u4ED6\\u4F5C\\u54C1\\u65E0\\u7A77\\u9B45\\u529B\\u7684\\u6765\\u6E90\\u3002'\n ),\n React.createElement(\n 'h3',\n { id: 'p2-4' },\n '\\u6F14\\u827A\\u754C\\u660E\\u661F'\n ),\n React.createElement(\n 'div',\n null,\n '\\u5510\\u7EB3\\u5FB7-\\u7279\\u6717\\u666E\\u662F\\u4E00\\u4F4D\\u4EBF\\u4E07\\u5BCC\\u7FC1\\uFF0C\\u5728\\u4ED6\\u6295\\u8D44\\u5236\\u4F5C\\u771F\\u4EBA\\u79C0\\u300A\\u98DE\\u9EC4\\u817E\\u8FBE\\u300B\\u4E4B\\u524D\\uFF0C\\u662F\\u4E00\\u4F4D\\u6210\\u529F\\u7684\\u623F\\u5730\\u4EA7\\u5546\\u3002\\u4E0D\\u5C11\\u5A92\\u4F53\\u8BA4\\u4E3A\\uFF0C\\u518D\\u5EA6\\u51FA\\u5C71\\u7684\\u7279\\u6717\\u666E\\u9996\\u5148\\u5F97\\u76CA\\u4E8E\\u4E13\\u95E8\\u4E3A\\u4ED6\\u91CF\\u8EAB\\u5B9A\\u505A\\u7684\\u771F\\u4EBA\\u79C0\\u8282\\u76EE\\u300A\\u98DE\\u9EC4\\u817E\\u8FBE\\u300B\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n '\\u7279\\u6717\\u666E\\u628A\\u4ED6\\u7684\\u70ED\\u95E8\\u771F\\u4EBA\\u79C0\\u8282\\u76EE\\u300A\\u98DE\\u9EC4\\u817E\\u8FBE\\u300B\\u5411\\u666E\\u901A\\u4EBA\\u655E\\u5F00\\uFF0C\\u8FD9\\u4E00\\u505A\\u6CD5\\u5F97\\u5230\\u4E86\\u56FD\\u9645\\u5A92\\u4ECB\\u7684\\u666E\\u904D\\u8D5E\\u540C\\uFF0C\\u867D\\u7136\\u7279\\u6717\\u666E\\u5E76\\u4E0D\\u8FD9\\u6837\\u8BA4\\u4E3A\\u3002\\u4F46\\u4E8B\\u5B9E\\u5374\\u662F\\u5982\\u6B64\\u3002\\u7B2C\\u4E00\\u5B63\\u7684\\u300A\\u98DE\\u9EC4\\u817E\\u8FBE\\u300B\\u8FCE\\u6765\\u4E862000\\u591A\\u201C\\u60F3\\u505A\\u5510\\u7EB3\\u5FB7\\u201D\\u7684\\u4EBA\\uFF0C11\\u4E2A\\u57CE\\u5E02\\u5728\\u4E89\\u53D6\\u4E3B\\u6301\\u8FD9\\u4E2A\\u8282\\u76EE\\u7684\\u673A\\u4F1A\\u3002\\u6700\\u540E\\u7684\\u7ADE\\u8D5B\\u5F53\\u7136\\u5728\\u7EBD\\u7EA6\\u7684\\u201C\\u7279\\u6717\\u666E\\u5927\\u53A6\\u201D\\u4E3E\\u884C\\u3002'\n ),\n React.createElement(\n 'h2',\n { id: 'p3' },\n '\\u4E2A\\u4EBA\\u751F\\u6D3B'\n ),\n React.createElement(\n 'h3',\n { id: 'p3-1' },\n '\\u9996\\u4EFB\\u59BB\\u5B50'\n ),\n React.createElement(\n 'div',\n null,\n '\\u4F0A\\u51E1\\u5A1C\\xB7\\u6CFD\\u5C3C\\u79D1\\u5A03\\uFF0C\\u66FE\\u662F\\u4E00\\u540D\\u65F6\\u88C5\\u6A21\\u7279\\uFF0C\\u540E\\u4EFB\\u5DDD\\u666E\\u96C6\\u56E2\\u5BA4\\u5185\\u8BBE\\u8BA1\\u526F\\u4E3B\\u5E2D\\uFF0C\\u4E3B\\u6301\\u5EFA\\u9020\\u96C6\\u56E2\\u540D\\u4E0B\\u591A\\u5904\\u9152\\u5E97\\u548C\\u8D4C\\u573A\\u3002\\u57281977\\u5E74\\u4E0E\\u7279\\u6717\\u666E\\u7ED3\\u5A5A\\uFF0C\\u4E4B\\u540E\\u51A0\\u592B\\u59D3\\u66F4\\u540D\\u4E3A\\u4F0A\\u51E1\\u5A1C-\\u7279\\u6717\\u666E\\uFF0C\\u4ED6\\u4EEC\\u4FE9\\u4EBA\\u5171\\u751F\\u6709\\u4E09\\u540D\\u5B50\\u5973\\u3002\\u4E24\\u4EBA\\u57281992\\u5E74\\u79BB\\u5A5A\\u3002'\n ),\n React.createElement(\n 'h3',\n { id: 'p3-2' },\n '\\u7B2C\\u4E8C\\u4EFB\\u59BB\\u5B50'\n ),\n React.createElement(\n 'div',\n null,\n '\\u739B\\u62C9\\xB7\\u6885\\u666E\\u5C14\\u65AF\\uFF0C\\u524D\\u590F\\u5A01\\u5937\\u5C0F\\u59D0\\uFF0C\\u662F\\u7279\\u6717\\u666E\\u7ED3\\u675F\\u4E0E\\u524D\\u59BB\\u4F0A\\u51E1\\u5A1C13\\u5E74\\u5A5A\\u59FB\\u7684\\u7F6A\\u9B41\\u7978\\u9996\\u30021993\\u5E74\\uFF0C\\u6885\\u666E\\u5C14\\u65AF\\u6210\\u4E3A\\u7B2C\\u4E8C\\u4F4D\\u7279\\u6717\\u666E\\u592A\\u592A\\uFF0C\\u800C\\u4E14\\u4E3A\\u7279\\u6717\\u666E\\u751F\\u4E0B\\u4ED6\\u4EEC\\u7684\\u5973\\u513F\\u8482\\u8299\\u59AE\\uFF0C5\\u5E74\\u4E4B\\u4E24\\u4EBA\\u5C31\\u5206\\u9053\\u626C\\u9573\\u4E86\\u3002'\n ),\n React.createElement(\n 'h3',\n { id: 'p3-3' },\n '\\u7B2C\\u4E09\\u4EFB\\u59BB\\u5B50'\n ),\n React.createElement(\n 'div',\n null,\n '\\u6885\\u5170\\u5A1C\\xB7\\u7279\\u6717\\u666E\\uFF0C2004\\u5E744\\u670826\\u65E5\\uFF0C\\u7279\\u6717\\u666E\\u5411\\u5176\\u6C42\\u5A5A\\u30022005\\u5E741\\u670822\\u65E5\\u5728\\u4F5B\\u7F57\\u91CC\\u8FBE\\u7684\\u68D5\\u6988\\u6EE9\\u7ED3\\u5A5A\\u30022006\\u5E743\\u670820\\u65E5\\uFF0C\\u4E24\\u4EBA\\u751F\\u4E0B\\u4E86\\u4ED6\\u4EEC\\u7684\\u4E00\\u4E2A\\u5B69\\u5B50\\uFF0C\\u4E5F\\u662F\\u5510\\u7EB3\\u5FB7\\u7684\\u7B2C\\u4E94\\u4E2A\\u5B69\\u5B50Barron William Trump\\u3002'\n ),\n React.createElement(\n 'h3',\n { id: 'p3-4' },\n '\\u4E94\\u4E2A\\u5B50\\u5973'\n ),\n React.createElement(\n 'div',\n null,\n React.createElement(\n 'b',\n null,\n '\\u5C0F\\u5510\\u7EB3\\u5FB7\\xB7\\u7279\\u6717\\u666E'\n ),\n '\\uFF1A\\u6BD5\\u4E1A\\u4E8E\\u6C83\\u987F\\u5546\\u5B66\\u9662\\uFF0C\\u4F1A\\u8BB2\\u6D41\\u5229\\u7684\\u6377\\u514B\\u8BED\\u3002\\u4F5C\\u4E3A\\u7279\\u6717\\u666E\\u96C6\\u56E2\\u7684\\u6267\\u884C\\u526F\\u603B\\u88C1\\uFF0C\\u5728\\u4E16\\u754C\\u5404\\u5730\\u62D3\\u5C55\\u65B0\\u9879\\u76EE\\u3002\\u5C0F\\u5510\\u7EB3\\u5FB7\\u7684\\u5BB6\\u5EAD\\u751F\\u6D3B\\u5E78\\u798F\\uFF0C\\u6709\\u4E94\\u4E2A\\u5B69\\u5B50\\uFF08\\u8FD9\\u4E00\\u70B9\\u548C\\u7236\\u4EB2\\u4E00\\u6837\\uFF09\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n React.createElement(\n 'b',\n null,\n '\\u4F0A\\u4E07\\u5361\\xB7\\u7279\\u6717\\u666E'\n ),\n '\\uFF1A\\u5E2E\\u7236\\u4EB2\\u505A\\u623F\\u5730\\u4EA7\\uFF0C\\u81EA\\u521B\\u54C1\\u724C\\uFF0C\\u798F\\u5E03\\u65AF\\u8BC4\\u5979\\u662F\\u6700\\u6709\\u94B1\\u768480\\u540E\\u5973\\u5BCC\\u8C6A\\uFF0C \\u6210\\u529F\\u5546\\u4E1A\\u5973\\u6027\\u7684\\u6807\\u6746\\u3002\\u4E0D\\u4EC5\\u662F\\u7236\\u4EB2\\u516C\\u53F8\\u91C7\\u8D2D\\u548C\\u53D1\\u5C55\\u90E8\\u95E8\\u7684\\u6267\\u884C\\u526F\\u603B\\u88C1\\uFF0C\\u77E5\\u540D\\u6A21\\u7279\\uFF0C\\u8FD8\\u662F\\u300A\\u7EBD\\u7EA6\\u65F6\\u62A5\\u300B\\u8BC4\\u51FA\\u7684\\u7545\\u9500\\u4E66\\u4F5C\\u8005\\u3002\\u8FD9\\u80B2\\u67093\\u4E2A\\u5B69\\u5B50\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n React.createElement(\n 'b',\n null,\n '\\u57C3\\u91CC\\u514B\\xB7\\u7279\\u6717\\u666E'\n ),\n '\\uFF1A\\u4E54\\u6CBB\\u6566\\u5927\\u5B66\\u4F18\\u79C0\\u6BD5\\u4E1A\\u751F\\uFF0C\\u540C\\u6837\\u4EFB\\u804C\\u7279\\u6717\\u666E\\u96C6\\u56E2\\u526F\\u603B\\u88C1\\uFF0C\\u4E0E\\u54E5\\u54E5\\u59D0\\u59D0\\u4E00\\u540C\\u62D3\\u5C55\\u4E86\\u516C\\u53F8\\u5728\\u56FD\\u9645\\u548C\\u56FD\\u5185\\u7684\\u96F6\\u552E\\u3001\\u5546\\u4E1A\\u3001\\u9152\\u5E97\\u548C\\u9AD8\\u5C14\\u592B\\u7B49\\u4E1A\\u52A1\\u3002\\u4ED6\\u8FD8\\u4E8E10\\u5E74\\u524D\\u521B\\u7ACB\\u4E86\\u57C3\\u91CC\\u514B\\xB7\\u7279\\u6717\\u666E\\u57FA\\u91D1\\uFF08ETF\\uFF09\\uFF0C\\u8D44\\u52A9\\u4E86\\u513F\\u7AE5\\u764C\\u75C7\\u7684\\u7814\\u7A76\\u4E0E\\u6CBB\\u7597\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n React.createElement(\n 'b',\n null,\n '\\u8482\\u8299\\u5C3C\\xB7\\u7279\\u6717\\u666E'\n ),\n '\\uFF1A\\u6BD5\\u4E1A\\u4E8E\\u5BBE\\u5915\\u6CD5\\u5C3C\\u4E9A\\u5927\\u5B66\\uFF0C\\u572817\\u5C81\\u7684\\u65F6\\u5019\\u53D1\\u5E03\\u4E86\\u4E00\\u9996\\u5355\\u66F2\\u540D\\u4E3A\\u300A\\u50CF\\u9E1F\\u513F\\u4E00\\u6837\\u300B\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n React.createElement(\n 'b',\n null,\n '\\u5DF4\\u4F26\\xB7\\u7279\\u6717\\u666E'\n ),\n '\\uFF1A\\u5E05\\u6C14\\u7684\\u5C0F\\u7EC5\\u58EB\\uFF0C\\u4F1A\\u8BB2\\u6D41\\u5229\\u7684\\u65AF\\u6D1B\\u6587\\u5C3C\\u4E9A\\u8BED\\u3002'\n ),\n React.createElement(\n 'h2',\n { id: 'p4' },\n '\\u4EBA\\u7269\\u8BC4\\u4EF7'\n ),\n React.createElement(\n 'div',\n null,\n '\\u62C9\\u91CC\\xB7\\u91D1\\uFF1A\\u4ED6\\u662F\\u4E2A\\u4F20\\u5947\\u4EBA\\u7269\\uFF0C\\u4E00\\u751F\\u8D77\\u4F0F\\u8DCC\\u5B95\\u201D\\u201C\\u73B0\\u5728\\u6CA1\\u6709\\u4F4E\\u6F6E\\uFF0C\\u672A\\u6765\\u53EA\\u6709\\u9AD8\\u6F6E\\u201D\\u3002'\n ),\n React.createElement(\n 'div',\n null,\n '\\u666E\\u4EAC\\uFF1A\\u6BEB\\u65E0\\u7591\\u95EE\\uFF0C\\u4ED6\\u5F88\\u806A\\u660E\\u4E14\\u624D\\u80FD\\u51FA\\u4F17\\u201D\\uFF0C\\u201C\\u4ED6\\u5F88\\u6709\\u624D\\u534E\\u3001\\u4EBA\\u683C\\u51FA\\u4F17\\u201D\\u3002'\n )\n );\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n 'div',\n { style: { padding: 20 } },\n React.createElement(\n _uxcore.FloatNav,\n {\n ref: function ref(node) {\n return _this2.nav = node;\n },\n showOrderNumber: true,\n height: 250,\n content: this.renderArticle()\n },\n React.createElement(\n NavItem,\n { title: '人物经历', anchor: 'p1' },\n React.createElement(NavItem, { title: '创业经历', anchor: 'p1-1', onClick: this.handleClick }),\n React.createElement(NavItem, { title: '参选总统', anchor: 'p1-2' }),\n React.createElement(NavItem, { title: '宣誓就职', anchor: 'p1-3' })\n ),\n React.createElement(\n NavItem,\n { title: '多重身份', anchor: 'p2' },\n React.createElement(NavItem, { title: '名人', anchor: 'p2-1' }),\n React.createElement(NavItem, { title: '富商', anchor: 'p2-2' }),\n React.createElement(NavItem, { title: '作家', anchor: 'p2-3' }),\n React.createElement(NavItem, { title: '演艺界明星', anchor: 'p2-4' })\n ),\n React.createElement(\n NavItem,\n { title: '个人生活', anchor: 'p3' },\n React.createElement(NavItem, { title: '首任妻子', anchor: 'p3-1' }),\n React.createElement(NavItem, { title: '第二任妻子', anchor: 'p3-2' }),\n React.createElement(NavItem, { title: '第三任妻子', anchor: 'p3-3' }),\n React.createElement(NavItem, { title: '五个子女', anchor: 'p3-4' })\n ),\n React.createElement(NavItem, { title: '人物评价', anchor: 'p4' })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-float-nav-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { FloatNav } from 'uxcore';\n\nconst { NavItem } = FloatNav;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick(link, orderNumber) {\n console.log('handleClick', link, orderNumber);\n }\n\n renderArticle() {\n return (\n <div \n className=\"article\"\n style={{\n marginRight: '200px',\n fontSize: '14px',\n }}\n >\n <h1>唐纳德·特朗普</h1>\n <div>唐纳德·特朗普，第45任美国总统，1946年6月14日生于美国纽约，政治家、商人、作家、主持人。特朗普1968年从宾夕法尼亚大学沃顿商学院毕业后，进入其父的房地产公司工作，并在1971年开始掌管公司运营。在随后几十年间，特朗普开始建立自己的房地产王国，人称“地产之王”。</div>\n <div>除房地产外，特朗普将投资范围延伸到其他行业，包括开设赌场、高尔夫球场等。他还涉足娱乐界，是美国真人秀《名人学徒》等电视节目的主持人，并担任“环球小姐”选美大赛主席。美国杂志《福布斯》在去年6月评估特朗普资产净值约为45亿美元，特朗普则称超过100亿美元。</div>\n <div>特朗普在过去20年间分别支持过共和党和民主党各主要总统竞选者。2015年6月，特朗普以共和党竞选者身份正式参加2016年美国总统选举。此前，特朗普没有担任过公共职务。特朗普结过3次婚，育有5个子女。</div>\n <div>2016年11月9日，美国大选计票结果显示：共和党候选人唐纳德·特朗普已获得了276张选举人票，超过270张选举人票的获胜标准，当选美国第45任总统。唐纳德·特朗普于当地时间2017年1月20日中午在美国首都华盛顿宣誓就职，正式成为美国第45任总统。</div>\n <h2 id=\"p1\">人物经历</h2>\n <h3 id=\"p1-1\">创业经历</h3>\n <div>1946年6月14日，特朗普在纽约市出生，排行老二，上有一个姐姐，下有两个弟弟、一个妹妹。由于祖父英年早逝，父亲为帮助家计，甚早即决意创业，发现房地产生意颇具“钱”途，遂创设“特朗普公司”，专门在纽约市皇后区及邻近地区兴建并经营中型公寓，供一般民众租赁或购买。</div>\n <div>在父母亲友的爱心呵护下，特朗普自幼即满腹自信，活力四射，无法静下来用功读书。13岁那年，父母只好送他去“纽约军事学校”求学，冀望军校的严格训练能帮助他力争上游。在军校就读期间，特朗普人缘甚佳，不仅学业成绩优异，也是运动健将，1964年自军校毕业时，领袖气质已隐然成形。</div>\n <div>离开军校后，特朗普获准进入隶属常春藤联盟的宾夕法尼亚大学沃顿商学院就读。大学时代，特朗普孜孜不倦地汲取商业领域新知，培养机敏生意眼光，加上父亲耳提面命的经营秘诀，大四时，已蠢蠢欲动，欲在商界闯出一片天。他不时去国外考察最新与未来的经济走向，深切体认现今最重要的企业经营战略就是“市场营销”。</div>\n <h3 id=\"p1-2\">参选总统</h3>\n <div>唐纳德·特朗普曾经积极活动以赢得2012年美国总统选举共和党的提名，挑战巴拉克·奥巴马，他还因为质疑奥巴马总统是否在美国出生而引起关注。奥巴马总统为了结束这场争议，不得不公布了他的出生证。但是他中途宣布退出美国总统选举共和党的提名。</div>\n <div>2015年6月17日，特朗普在纽约市第五大道特朗普大厦宣布，决定参加总统大选。“我正式宣布参加美国总统竞选，我们要让美国再次强大起来！”</div>\n <div>特朗普是第12位宣布参加2016年总统竞选的共和党人。</div>\n <h3 id=\"p1-3\">宣誓就职</h3>\n <div>唐纳德·特朗普于当地时间2017年1月20日中午在美国首都华盛顿宣誓就职，正式成为美国第45任总统。</div>\n <h2 id=\"p2\">多重身份</h2>\n <h3 id=\"p2-1\">名人</h3>\n <div>特朗普的突出是因为他敢说敢做、敢做敢当的言谈与行事风格，加上他的私生活颇具趣味性，特朗普不仅曾是美国《商业周刊》封面人物，亦曾出现在全美最畅销的八卦杂志《国家询问报》的头条新闻。</div>\n <div>唐纳德-特朗普的家位于纽约的高尚住宅区，在他豪宅的客厅中央，伫立着巨型的大理石喷泉。生活奢侈的特朗普也是美国最招摇的富翁。他在纽约第五大道公寓的门都非得镀上黄金，以显示他是多么与众不同。</div>\n <div>全美散布着以他的名字命名的高楼大厦、游艇。特朗普成为美国传媒热衷的人物，《间谍》杂志宣称“特朗普是一个浅薄庸俗的暴发户”，而美国著名讽刺连环漫画《杜恩斯比利》的主编也把特朗普作为头号攻击对象。上世纪90年代初期的时候，特朗普价值15亿美元巨资的地产王国曾遭遇巨大滑铁卢，他丧失了2/3的财富，1997年却以自传《特朗普：回归的艺术》而重振雄风。</div>\n <h3 id=\"p2-2\">富翁</h3>\n <div>特朗普的媒体曝光率非常高，喜欢跟摇滚明星似的，每次亮相都美女环绕，所以他也就非常喜欢做跟美女相关的事情，环球小姐大赛也正是他和NBC一起支持的活动；他还喜欢和超级模特结婚。在工作繁忙、生活多彩多姿之余，又开始对于选美活动产生浓厚兴趣，遂一举买下“环球小姐”、“美国小姐”和“美国妙龄小姐”选拔委员会的支援机构与主办权，成为这些选美活动的后台老板。</div>\n <div>此外，特朗普善于作秀，谙熟自我宣传之道。由于太过招摇，特朗普一度被认为是美国最讨人嫌的富翁。这次节目播出时，为显示他“王者归来”的风范，特朗普还在3月22日出版的《纽约时报》、《华盛顿邮报》以及《华尔街日报》等美国主流媒体刊登了好几个整版广告，重点推介他的个人、他的公司以及他的产品。特朗普公司的人声称，如今他们平均每天会接到超过50个预约采访的电话。</div>\n <h3 id=\"p2-3\">作家</h3>\n <div>特朗普是一位非常娴熟的作家。他的第一本自传《做生意的艺术》是每个生意人的“圣经”，卖出了300多万本，被《纽约时报》评为最畅销的书籍，并连续在排行榜上维持了32星期的冠军地位。《结局，颠峰生存》和他的第三本书《回归的艺术》一样，也是《纽约时报》评出的最佳书籍和最畅销书籍的第一名。特朗普最新的小说《美国，值得我们拥有》开始了他文学化的写作路线。特朗普的书与美国民众的工作生活息息相关，同时也阐述了他对美国政治、经济、文化的看法，这些都是他作品无穷魅力的来源。</div>\n <h3 id=\"p2-4\">演艺界明星</h3>\n <div>唐纳德-特朗普是一位亿万富翁，在他投资制作真人秀《飞黄腾达》之前，是一位成功的房地产商。不少媒体认为，再度出山的特朗普首先得益于专门为他量身定做的真人秀节目《飞黄腾达》。</div>\n <div>特朗普把他的热门真人秀节目《飞黄腾达》向普通人敞开，这一做法得到了国际媒介的普遍赞同，虽然特朗普并不这样认为。但事实却是如此。第一季的《飞黄腾达》迎来了2000多“想做唐纳德”的人，11个城市在争取主持这个节目的机会。最后的竞赛当然在纽约的“特朗普大厦”举行。</div>\n <h2 id=\"p3\">个人生活</h2>\n <h3 id=\"p3-1\">首任妻子</h3>\n <div>伊凡娜·泽尼科娃，曾是一名时装模特，后任川普集团室内设计副主席，主持建造集团名下多处酒店和赌场。在1977年与特朗普结婚，之后冠夫姓更名为伊凡娜-特朗普，他们俩人共生有三名子女。两人在1992年离婚。</div>\n <h3 id=\"p3-2\">第二任妻子</h3>\n <div>玛拉·梅普尔斯，前夏威夷小姐，是特朗普结束与前妻伊凡娜13年婚姻的罪魁祸首。1993年，梅普尔斯成为第二位特朗普太太，而且为特朗普生下他们的女儿蒂芙妮，5年之两人就分道扬镳了。</div>\n <h3 id=\"p3-3\">第三任妻子</h3>\n <div>梅兰娜·特朗普，2004年4月26日，特朗普向其求婚。2005年1月22日在佛罗里达的棕榈滩结婚。2006年3月20日，两人生下了他们的一个孩子，也是唐纳德的第五个孩子Barron William Trump。</div>\n <h3 id=\"p3-4\">五个子女</h3>\n <div><b>小唐纳德·特朗普</b>：毕业于沃顿商学院，会讲流利的捷克语。作为特朗普集团的执行副总裁，在世界各地拓展新项目。小唐纳德的家庭生活幸福，有五个孩子（这一点和父亲一样）。</div>\n <div><b>伊万卡·特朗普</b>：帮父亲做房地产，自创品牌，福布斯评她是最有钱的80后女富豪，成功商业女性的标杆。不仅是父亲公司采购和发展部门的执行副总裁，知名模特，还是《纽约时报》评出的畅销书作者。这育有3个孩子。</div>\n <div><b>埃里克·特朗普</b>：乔治敦大学优秀毕业生，同样任职特朗普集团副总裁，与哥哥姐姐一同拓展了公司在国际和国内的零售、商业、酒店和高尔夫等业务。他还于10年前创立了埃里克·特朗普基金（ETF），资助了儿童癌症的研究与治疗。</div>\n <div><b>蒂芙尼·特朗普</b>：毕业于宾夕法尼亚大学，在17岁的时候发布了一首单曲名为《像鸟儿一样》。</div>\n <div><b>巴伦·特朗普</b>：帅气的小绅士，会讲流利的斯洛文尼亚语。</div>\n <h2 id=\"p4\">人物评价</h2>\n <div>拉里·金：他是个传奇人物，一生起伏跌宕”“现在没有低潮，未来只有高潮”。</div>\n <div>普京：毫无疑问，他很聪明且才能出众”，“他很有才华、人格出众”。</div>\n </div>\n );\n }\n\n render() {\n return (\n <div style={{ padding: 20 }}>\n <FloatNav\n ref={node => (this.nav = node)}\n showOrderNumber\n height={250}\n content={this.renderArticle()}\n >\n <NavItem title={'人物经历'} anchor={'p1'}>\n <NavItem title={'创业经历'} anchor={'p1-1'} onClick={this.handleClick} />\n <NavItem title={'参选总统'} anchor={'p1-2'} />\n <NavItem title={'宣誓就职'} anchor={'p1-3'} />\n </NavItem>\n <NavItem title={'多重身份'} anchor={'p2'}>\n <NavItem title={'名人'} anchor={'p2-1'} />\n <NavItem title={'富商'} anchor={'p2-2'} />\n <NavItem title={'作家'} anchor={'p2-3'} />\n <NavItem title={'演艺界明星'} anchor={'p2-4'} />\n </NavItem>\n <NavItem title={'个人生活'} anchor={'p3'}>\n <NavItem title={'首任妻子'} anchor={'p3-1'} />\n <NavItem title={'第二任妻子'} anchor={'p3-2'} />\n <NavItem title={'第三任妻子'} anchor={'p3-3'} />\n <NavItem title={'五个子女'} anchor={'p3-4'} />\n </NavItem>\n <NavItem title={'人物评价'} anchor={'p4'} />\n </FloatNav>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />, document.getElementById('components-float-nav-demo-basic'));</code></pre></div><style type=\"text/css\">h1 {\n margin: 20px 0;\n}\n\nh2 {\n margin: 16px 0;\n}\n\nh3 {\n margin: 12px 0;\n}</style><div class=\"highlight\"><pre><code class=\"css\">h1 {\n margin: 20px 0;\n}\n\nh2 {\n margin: 16px 0;\n}\n\nh3 {\n margin: 12px 0;\n}</code></pre></div>"},"status":"public","toc":""}]

基本使用

基本用法。


import { FloatNav } from 'uxcore';

const { NavItem } = FloatNav;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(link, orderNumber) {
    console.log('handleClick', link, orderNumber);
  }

  renderArticle() {
    return (
      <div 
        className="article"
        style={{
          marginRight: '200px',
          fontSize: '14px',
        }}
      >
        <h1>唐纳德·特朗普</h1>
        <div>唐纳德·特朗普，第45任美国总统，1946年6月14日生于美国纽约，政治家、商人、作家、主持人。特朗普1968年从宾夕法尼亚大学沃顿商学院毕业后，进入其父的房地产公司工作，并在1971年开始掌管公司运营。在随后几十年间，特朗普开始建立自己的房地产王国，人称“地产之王”。</div>
        <div>除房地产外，特朗普将投资范围延伸到其他行业，包括开设赌场、高尔夫球场等。他还涉足娱乐界，是美国真人秀《名人学徒》等电视节目的主持人，并担任“环球小姐”选美大赛主席。美国杂志《福布斯》在去年6月评估特朗普资产净值约为45亿美元，特朗普则称超过100亿美元。</div>
        <div>特朗普在过去20年间分别支持过共和党和民主党各主要总统竞选者。2015年6月，特朗普以共和党竞选者身份正式参加2016年美国总统选举。此前，特朗普没有担任过公共职务。特朗普结过3次婚，育有5个子女。</div>
        <div>2016年11月9日，美国大选计票结果显示：共和党候选人唐纳德·特朗普已获得了276张选举人票，超过270张选举人票的获胜标准，当选美国第45任总统。唐纳德·特朗普于当地时间2017年1月20日中午在美国首都华盛顿宣誓就职，正式成为美国第45任总统。</div>
        <h2 id="p1">人物经历</h2>
        <h3 id="p1-1">创业经历</h3>
        <div>1946年6月14日，特朗普在纽约市出生，排行老二，上有一个姐姐，下有两个弟弟、一个妹妹。由于祖父英年早逝，父亲为帮助家计，甚早即决意创业，发现房地产生意颇具“钱”途，遂创设“特朗普公司”，专门在纽约市皇后区及邻近地区兴建并经营中型公寓，供一般民众租赁或购买。</div>
        <div>在父母亲友的爱心呵护下，特朗普自幼即满腹自信，活力四射，无法静下来用功读书。13岁那年，父母只好送他去“纽约军事学校”求学，冀望军校的严格训练能帮助他力争上游。在军校就读期间，特朗普人缘甚佳，不仅学业成绩优异，也是运动健将，1964年自军校毕业时，领袖气质已隐然成形。</div>
        <div>离开军校后，特朗普获准进入隶属常春藤联盟的宾夕法尼亚大学沃顿商学院就读。大学时代，特朗普孜孜不倦地汲取商业领域新知，培养机敏生意眼光，加上父亲耳提面命的经营秘诀，大四时，已蠢蠢欲动，欲在商界闯出一片天。他不时去国外考察最新与未来的经济走向，深切体认现今最重要的企业经营战略就是“市场营销”。</div>
        <h3 id="p1-2">参选总统</h3>
        <div>唐纳德·特朗普曾经积极活动以赢得2012年美国总统选举共和党的提名，挑战巴拉克·奥巴马，他还因为质疑奥巴马总统是否在美国出生而引起关注。奥巴马总统为了结束这场争议，不得不公布了他的出生证。但是他中途宣布退出美国总统选举共和党的提名。</div>
        <div>2015年6月17日，特朗普在纽约市第五大道特朗普大厦宣布，决定参加总统大选。“我正式宣布参加美国总统竞选，我们要让美国再次强大起来！”</div>
        <div>特朗普是第12位宣布参加2016年总统竞选的共和党人。</div>
        <h3 id="p1-3">宣誓就职</h3>
        <div>唐纳德·特朗普于当地时间2017年1月20日中午在美国首都华盛顿宣誓就职，正式成为美国第45任总统。</div>
        <h2 id="p2">多重身份</h2>
        <h3 id="p2-1">名人</h3>
        <div>特朗普的突出是因为他敢说敢做、敢做敢当的言谈与行事风格，加上他的私生活颇具趣味性，特朗普不仅曾是美国《商业周刊》封面人物，亦曾出现在全美最畅销的八卦杂志《国家询问报》的头条新闻。</div>
        <div>唐纳德-特朗普的家位于纽约的高尚住宅区，在他豪宅的客厅中央，伫立着巨型的大理石喷泉。生活奢侈的特朗普也是美国最招摇的富翁。他在纽约第五大道公寓的门都非得镀上黄金，以显示他是多么与众不同。</div>
        <div>全美散布着以他的名字命名的高楼大厦、游艇。特朗普成为美国传媒热衷的人物，《间谍》杂志宣称“特朗普是一个浅薄庸俗的暴发户”，而美国著名讽刺连环漫画《杜恩斯比利》的主编也把特朗普作为头号攻击对象。上世纪90年代初期的时候，特朗普价值15亿美元巨资的地产王国曾遭遇巨大滑铁卢，他丧失了2/3的财富，1997年却以自传《特朗普：回归的艺术》而重振雄风。</div>
        <h3 id="p2-2">富翁</h3>
        <div>特朗普的媒体曝光率非常高，喜欢跟摇滚明星似的，每次亮相都美女环绕，所以他也就非常喜欢做跟美女相关的事情，环球小姐大赛也正是他和NBC一起支持的活动；他还喜欢和超级模特结婚。在工作繁忙、生活多彩多姿之余，又开始对于选美活动产生浓厚兴趣，遂一举买下“环球小姐”、“美国小姐”和“美国妙龄小姐”选拔委员会的支援机构与主办权，成为这些选美活动的后台老板。</div>
        <div>此外，特朗普善于作秀，谙熟自我宣传之道。由于太过招摇，特朗普一度被认为是美国最讨人嫌的富翁。这次节目播出时，为显示他“王者归来”的风范，特朗普还在3月22日出版的《纽约时报》、《华盛顿邮报》以及《华尔街日报》等美国主流媒体刊登了好几个整版广告，重点推介他的个人、他的公司以及他的产品。特朗普公司的人声称，如今他们平均每天会接到超过50个预约采访的电话。</div>
        <h3 id="p2-3">作家</h3>
        <div>特朗普是一位非常娴熟的作家。他的第一本自传《做生意的艺术》是每个生意人的“圣经”，卖出了300多万本，被《纽约时报》评为最畅销的书籍，并连续在排行榜上维持了32星期的冠军地位。《结局，颠峰生存》和他的第三本书《回归的艺术》一样，也是《纽约时报》评出的最佳书籍和最畅销书籍的第一名。特朗普最新的小说《美国，值得我们拥有》开始了他文学化的写作路线。特朗普的书与美国民众的工作生活息息相关，同时也阐述了他对美国政治、经济、文化的看法，这些都是他作品无穷魅力的来源。</div>
        <h3 id="p2-4">演艺界明星</h3>
        <div>唐纳德-特朗普是一位亿万富翁，在他投资制作真人秀《飞黄腾达》之前，是一位成功的房地产商。不少媒体认为，再度出山的特朗普首先得益于专门为他量身定做的真人秀节目《飞黄腾达》。</div>
        <div>特朗普把他的热门真人秀节目《飞黄腾达》向普通人敞开，这一做法得到了国际媒介的普遍赞同，虽然特朗普并不这样认为。但事实却是如此。第一季的《飞黄腾达》迎来了2000多“想做唐纳德”的人，11个城市在争取主持这个节目的机会。最后的竞赛当然在纽约的“特朗普大厦”举行。</div>
        <h2 id="p3">个人生活</h2>
        <h3 id="p3-1">首任妻子</h3>
        <div>伊凡娜·泽尼科娃，曾是一名时装模特，后任川普集团室内设计副主席，主持建造集团名下多处酒店和赌场。在1977年与特朗普结婚，之后冠夫姓更名为伊凡娜-特朗普，他们俩人共生有三名子女。两人在1992年离婚。</div>
        <h3 id="p3-2">第二任妻子</h3>
        <div>玛拉·梅普尔斯，前夏威夷小姐，是特朗普结束与前妻伊凡娜13年婚姻的罪魁祸首。1993年，梅普尔斯成为第二位特朗普太太，而且为特朗普生下他们的女儿蒂芙妮，5年之两人就分道扬镳了。</div>
        <h3 id="p3-3">第三任妻子</h3>
        <div>梅兰娜·特朗普，2004年4月26日，特朗普向其求婚。2005年1月22日在佛罗里达的棕榈滩结婚。2006年3月20日，两人生下了他们的一个孩子，也是唐纳德的第五个孩子Barron William Trump。</div>
        <h3 id="p3-4">五个子女</h3>
        <div><b>小唐纳德·特朗普</b>：毕业于沃顿商学院，会讲流利的捷克语。作为特朗普集团的执行副总裁，在世界各地拓展新项目。小唐纳德的家庭生活幸福，有五个孩子（这一点和父亲一样）。</div>
        <div><b>伊万卡·特朗普</b>：帮父亲做房地产，自创品牌，福布斯评她是最有钱的80后女富豪， 成功商业女性的标杆。不仅是父亲公司采购和发展部门的执行副总裁，知名模特，还是《纽约时报》评出的畅销书作者。这育有3个孩子。</div>
        <div><b>埃里克·特朗普</b>：乔治敦大学优秀毕业生，同样任职特朗普集团副总裁，与哥哥姐姐一同拓展了公司在国际和国内的零售、商业、酒店和高尔夫等业务。他还于10年前创立了埃里克·特朗普基金（ETF），资助了儿童癌症的研究与治疗。</div>
        <div><b>蒂芙尼·特朗普</b>：毕业于宾夕法尼亚大学，在17岁的时候发布了一首单曲名为《像鸟儿一样》。</div>
        <div><b>巴伦·特朗普</b>：帅气的小绅士，会讲流利的斯洛文尼亚语。</div>
        <h2 id="p4">人物评价</h2>
        <div>拉里·金：他是个传奇人物，一生起伏跌宕”“现在没有低潮，未来只有高潮”。</div>
        <div>普京：毫无疑问，他很聪明且才能出众”，“他很有才华、人格出众”。</div>
      </div>
    );
  }

  render() {
    return (
      <div style={{ padding: 20 }}>
        <FloatNav
          ref={node => (this.nav = node)}
          showOrderNumber
          height={250}
          content={this.renderArticle()}
        >
          <NavItem title={'人物经历'} anchor={'p1'}>
            <NavItem title={'创业经历'} anchor={'p1-1'} onClick={this.handleClick} />
            <NavItem title={'参选总统'} anchor={'p1-2'} />
            <NavItem title={'宣誓就职'} anchor={'p1-3'} />
          </NavItem>
          <NavItem title={'多重身份'} anchor={'p2'}>
            <NavItem title={'名人'} anchor={'p2-1'} />
            <NavItem title={'富商'} anchor={'p2-2'} />
            <NavItem title={'作家'} anchor={'p2-3'} />
            <NavItem title={'演艺界明星'} anchor={'p2-4'} />
          </NavItem>
          <NavItem title={'个人生活'} anchor={'p3'}>
            <NavItem title={'首任妻子'} anchor={'p3-1'} />
            <NavItem title={'第二任妻子'} anchor={'p3-2'} />
            <NavItem title={'第三任妻子'} anchor={'p3-3'} />
            <NavItem title={'五个子女'} anchor={'p3-4'} />
          </NavItem>
          <NavItem title={'人物评价'} anchor={'p4'} />
        </FloatNav>
      </div>
    );
  }
}

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

h1 {
  margin: 20px 0;
}

h2 {
  margin: 16px 0;
}

h3 {
  margin: 12px 0;
}

Props

FloatNavWrapper

With content wrapper.

Name	Type	Required	Default	Comments
prefixCls	string	no	'uxcore-float-nav'	prefix classname for component
className	string	no	''	custom classname for component
showOrderNumber	boolean	no	true	prepend order index to the nav item
width	number	no	260	nav's width
height	number	no	370	nav's height
offset	object	no	{right: 20, bottom: 20}	nav's position offset
content	react element	yes	null	place the content with anchor here
stepLength	number	no	50	scroll length
hoverable	boolean	no	false	enable the haverable feature

FloatNav

Without content wrapper.

Name	Type	Required	Default	Comments
prefixCls	string	no	'uxcore-float-nav'	prefix classname for component
className	string	no	''	custom classname for component
showOrderNumber	boolean	no	true	prepend order index to the nav item
width	number	no	260	nav's width
height	number	no	370	nav's height
offset	object	no	{right: 20, bottom: 20}	nav's position offset
stepLength	number	no	50	scroll length

NavItem

Name	Type	Required	Default	Comments
title	react element or string	yes	''	nav item's title
anchor	string	yes	''	define the anchor
onClick	function	no	noop	trigger when nav item is clicked with two parameter(anchor, orderNumber)