组件演示

[{"title":"基本用法","id":"components-steps-demo-basic","tags":[],"filepath":"site/components/steps/demo/basic.md","directory":"components/steps/demo","filename":"basic","meta":{"title":"基本用法","description":"\n<p>简单的步骤条。</p>\n","order":"0","filepath":"site/components/steps/demo/basic.md","filename":"basic","directory":"components/steps/demo","id":"components-steps-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcoreSteps = require('uxcore-steps');\n\nvar _uxcoreSteps2 = _interopRequireDefault(_uxcoreSteps);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nReactDOM.render(React.createElement(\n _uxcoreSteps2.default,\n { current: 2, type: 'bottom-desc' },\n React.createElement(_uxcoreSteps.Step, { key: 0, title: '步骤一', description: '\\u63CF\\u8FF0\\u6587\\u6848' }),\n React.createElement(_uxcoreSteps.Step, { key: 1, title: '步骤二', description: '\\u63CF\\u8FF0\\u6587\\u6848' }),\n React.createElement(_uxcoreSteps.Step, { key: 2, title: '步骤三', description: '\\u63CF\\u8FF0\\u6587\\u6848' }),\n React.createElement(_uxcoreSteps.Step, { key: 3, title: '步骤四', description: '\\u63CF\\u8FF0\\u6587\\u6848' })\n), document.getElementById('components-steps-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> Steps, { Step } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-steps'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Steps</span> <span class=\"hljs-attribute\">current</span>=<span class=\"hljs-value\">{2}</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"bottom-desc\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{0}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤一'}</span> <span class=\"hljs-attribute\">description</span>=<span class=\"hljs-value\">\"描述文案\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤二'}</span> <span class=\"hljs-attribute\">description</span>=<span class=\"hljs-value\">\"描述文案\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{2}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤三'}</span> <span class=\"hljs-attribute\">description</span>=<span class=\"hljs-value\">\"描述文案\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{3}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤四'}</span> <span class=\"hljs-attribute\">description</span>=<span class=\"hljs-value\">\"描述文案\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Steps</span>&gt;</span>\n, document.getElementById('components-steps-demo-basic'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"迷你版","id":"components-steps-demo-mini","tags":[],"filepath":"site/components/steps/demo/mini.md","directory":"components/steps/demo","filename":"mini","meta":{"title":"迷你版","description":"\n<p>迷你版的步骤条,通过设置 <Steps size=\"small\"> 启用.</p>\n","order":"1","filepath":"site/components/steps/demo/mini.md","filename":"mini","directory":"components/steps/demo","id":"components-steps-demo-mini","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcoreSteps = require('uxcore-steps');\n\nvar _uxcoreSteps2 = _interopRequireDefault(_uxcoreSteps);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nReactDOM.render(React.createElement(\n _uxcoreSteps2.default,\n { current: 2, showIcon: false, type: 'bottom-desc' },\n React.createElement(_uxcoreSteps.Step, { key: 0, title: '步骤一' }),\n React.createElement(_uxcoreSteps.Step, { key: 1, title: '步骤二' }),\n React.createElement(_uxcoreSteps.Step, { key: 2, title: '步骤三' }),\n React.createElement(_uxcoreSteps.Step, { key: 3, title: '步骤四' })\n), document.getElementById('components-steps-demo-mini'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> Steps, { Step } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-steps'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Steps</span> <span class=\"hljs-attribute\">current</span>=<span class=\"hljs-value\">{2}</span> <span class=\"hljs-attribute\">showIcon</span>=<span class=\"hljs-value\">{false}</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"bottom-desc\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{0}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤一'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤二'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{2}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤三'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{3}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤四'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Steps</span>&gt;</span>\n, document.getElementById('components-steps-demo-mini'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"箭头型","id":"components-steps-demo-arrow","tags":[],"filepath":"site/components/steps/demo/arrow.md","directory":"components/steps/demo","filename":"arrow","meta":{"title":"箭头型","description":"\n","order":"2","filepath":"site/components/steps/demo/arrow.md","filename":"arrow","directory":"components/steps/demo","id":"components-steps-demo-arrow","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcoreSteps = require('uxcore-steps');\n\nvar _uxcoreSteps2 = _interopRequireDefault(_uxcoreSteps);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nReactDOM.render(React.createElement(\n 'div',\n { style: { width: '800px' } },\n React.createElement(\n _uxcoreSteps2.default,\n { current: 1, type: 'arrow-bar' },\n React.createElement(_uxcoreSteps.Step, { key: 0, title: '步骤一' }),\n React.createElement(_uxcoreSteps.Step, { key: 1, title: '步骤二', description: '\\u63CF\\u8FF0\\u6587\\u6848' }),\n React.createElement(_uxcoreSteps.Step, { key: 2, title: '步骤三' })\n )\n), document.getElementById('components-steps-demo-arrow'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> Steps, { Step } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-steps'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> '<span class=\"hljs-attribute\">800px</span>' }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Steps</span> <span class=\"hljs-attribute\">current</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"arrow-bar\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{0}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤一'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤二'}</span> <span class=\"hljs-attribute\">description</span>=<span class=\"hljs-value\">\"描述文案\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{2}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤三'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Steps</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n, document.getElementById('components-steps-demo-arrow'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"竖直方向的步骤条","id":"components-steps-demo-vertical","tags":[],"filepath":"site/components/steps/demo/vertical.md","directory":"components/steps/demo","filename":"vertical","meta":{"title":"竖直方向的步骤条","description":"\n<p>简单的竖直方向的步骤条。</p>\n","order":"3","filepath":"site/components/steps/demo/vertical.md","filename":"vertical","directory":"components/steps/demo","id":"components-steps-demo-vertical","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcoreSteps = require('uxcore-steps');\n\nvar _uxcoreSteps2 = _interopRequireDefault(_uxcoreSteps);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar steps = [{\n title: '已完成',\n description: '这里是多信息的描述啊'\n}, {\n title: '进行中',\n description: '这里是多信息的耶哦耶哦哦耶哦耶'\n}, {\n title: '又一个待运行',\n description: '描述啊描述啊'\n}, {\n title: '待运行',\n description: '这里是多信息的描述啊'\n}].map(function (s, i) {\n return React.createElement(_uxcoreSteps.Step, { key: i, title: s.title, description: s.description });\n});\n\nReactDOM.render(React.createElement(\n _uxcoreSteps2.default,\n { direction: 'vertical', current: 1 },\n steps\n), document.getElementById('components-steps-demo-vertical'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> Steps, { Step } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-steps'</span>;\n\n<span class=\"hljs-keyword\">const</span> steps = [{\n title: <span class=\"hljs-string\">'已完成'</span>,\n description: <span class=\"hljs-string\">'这里是多信息的描述啊'</span>,\n}, {\n title: <span class=\"hljs-string\">'进行中'</span>,\n description: <span class=\"hljs-string\">'这里是多信息的耶哦耶哦哦耶哦耶'</span>,\n}, {\n title: <span class=\"hljs-string\">'又一个待运行'</span>,\n description: <span class=\"hljs-string\">'描述啊描述啊'</span>,\n}, {\n title: <span class=\"hljs-string\">'待运行'</span>,\n description: <span class=\"hljs-string\">'这里是多信息的描述啊'</span>,\n}].map((s, i) =&gt; (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{i}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{s.title}</span> <span class=\"hljs-attribute\">description</span>=<span class=\"hljs-value\">{s.description}</span> /&gt;</span>\n )</span>);\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Steps</span> <span class=\"hljs-attribute\">direction</span>=<span class=\"hljs-value\">\"vertical\"</span> <span class=\"hljs-attribute\">current</span>=<span class=\"hljs-value\">{1}</span>&gt;</span>{steps}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Steps</span>&gt;</span>\n, document.getElementById('components-steps-demo-vertical'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"竖直方向的小型步骤条","id":"components-steps-demo-verticalmini","tags":[],"filepath":"site/components/steps/demo/verticalmini.md","directory":"components/steps/demo","filename":"verticalmini","meta":{"title":"竖直方向的小型步骤条","description":"\n<p>简单的竖直方向的小型步骤条。</p>\n","order":"4","filepath":"site/components/steps/demo/verticalmini.md","filename":"verticalmini","directory":"components/steps/demo","id":"components-steps-demo-verticalmini","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcoreSteps = require('uxcore-steps');\n\nvar _uxcoreSteps2 = _interopRequireDefault(_uxcoreSteps);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar steps = [{\n title: '已完成',\n description: '这里是多信息的描述啊'\n}, {\n title: '进行中',\n description: '这里是多信息的耶哦耶哦哦耶哦耶'\n}, {\n title: '又一个待运行',\n description: '描述啊描述啊'\n}, {\n title: '待运行',\n description: '这里是多信息的描述啊'\n}].map(function (s, i) {\n return React.createElement(_uxcoreSteps.Step, { key: i, title: s.title, description: s.description });\n});\n\nReactDOM.render(React.createElement(\n _uxcoreSteps2.default,\n { direction: 'vertical', showIcon: false, current: 1 },\n steps\n), document.getElementById('components-steps-demo-verticalmini'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> Steps, { Step } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-steps'</span>;\n\n<span class=\"hljs-keyword\">const</span> steps = [{\n title: <span class=\"hljs-string\">'已完成'</span>,\n description: <span class=\"hljs-string\">'这里是多信息的描述啊'</span>,\n}, {\n title: <span class=\"hljs-string\">'进行中'</span>,\n description: <span class=\"hljs-string\">'这里是多信息的耶哦耶哦哦耶哦耶'</span>,\n}, {\n title: <span class=\"hljs-string\">'又一个待运行'</span>,\n description: <span class=\"hljs-string\">'描述啊描述啊'</span>,\n}, {\n title: <span class=\"hljs-string\">'待运行'</span>,\n description: <span class=\"hljs-string\">'这里是多信息的描述啊'</span>,\n}].map((s, i) =&gt; (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{i}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{s.title}</span> <span class=\"hljs-attribute\">description</span>=<span class=\"hljs-value\">{s.description}</span> /&gt;</span>\n )</span>);\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Steps</span> <span class=\"hljs-attribute\">direction</span>=<span class=\"hljs-value\">\"vertical\"</span> <span class=\"hljs-attribute\">showIcon</span>=<span class=\"hljs-value\">{false}</span> <span class=\"hljs-attribute\">current</span>=<span class=\"hljs-value\">{1}</span>&gt;</span>{steps}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Steps</span>&gt;</span>\n, document.getElementById('components-steps-demo-verticalmini'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"出错状态","id":"components-steps-demo-error","tags":[],"filepath":"site/components/steps/demo/error.md","directory":"components/steps/demo","filename":"error","meta":{"title":"出错状态","description":"\n<p>每种风格都有对应的出错状态。</p>\n","order":"6","filepath":"site/components/steps/demo/error.md","filename":"error","directory":"components/steps/demo","id":"components-steps-demo-error","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcoreSteps = require('uxcore-steps');\n\nvar _uxcoreSteps2 = _interopRequireDefault(_uxcoreSteps);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nReactDOM.render(React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcoreSteps2.default,\n { current: 1, type: 'bottom-desc' },\n React.createElement(_uxcoreSteps.Step, { key: 0, title: '步骤一' }),\n React.createElement(_uxcoreSteps.Step, { key: 1, title: '步骤二', status: 'error' }),\n React.createElement(_uxcoreSteps.Step, { key: 2, title: '步骤三' })\n ),\n React.createElement(\n _uxcoreSteps2.default,\n { current: 1, showIcon: false, type: 'bottom-desc' },\n React.createElement(_uxcoreSteps.Step, { key: 0, title: '步骤一' }),\n React.createElement(_uxcoreSteps.Step, { key: 1, title: '步骤二', status: 'error' }),\n React.createElement(_uxcoreSteps.Step, { key: 2, title: '步骤三' })\n ),\n React.createElement(\n _uxcoreSteps2.default,\n { current: 1, type: 'arrow-bar' },\n React.createElement(_uxcoreSteps.Step, { key: 0, title: '步骤一' }),\n React.createElement(_uxcoreSteps.Step, { key: 1, title: '步骤二', status: 'error' }),\n React.createElement(_uxcoreSteps.Step, { key: 2, title: '步骤三' })\n )\n), document.getElementById('components-steps-demo-error'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> Steps, { Step } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-steps'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Steps</span> <span class=\"hljs-attribute\">current</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"bottom-desc\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{0}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤一'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤二'}</span> <span class=\"hljs-attribute\">status</span>=<span class=\"hljs-value\">\"error\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{2}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤三'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Steps</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Steps</span> <span class=\"hljs-attribute\">current</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">showIcon</span>=<span class=\"hljs-value\">{false}</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"bottom-desc\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{0}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤一'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤二'}</span> <span class=\"hljs-attribute\">status</span>=<span class=\"hljs-value\">\"error\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{2}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤三'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Steps</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Steps</span> <span class=\"hljs-attribute\">current</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"arrow-bar\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{0}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤一'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤二'}</span> <span class=\"hljs-attribute\">status</span>=<span class=\"hljs-value\">\"error\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{2}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤三'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Steps</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n, document.getElementById('components-steps-demo-error'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"可返回编辑","id":"components-steps-demo-editable","tags":[],"filepath":"site/components/steps/demo/editable.md","directory":"components/steps/demo","filename":"editable","meta":{"title":"可返回编辑","description":"\n<p>对可返回编辑的 Step 做强调显示。</p>\n","order":"7","filepath":"site/components/steps/demo/editable.md","filename":"editable","directory":"components/steps/demo","id":"components-steps-demo-editable","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcoreSteps = require('uxcore-steps');\n\nvar _uxcoreSteps2 = _interopRequireDefault(_uxcoreSteps);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nReactDOM.render(React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcoreSteps2.default,\n { current: 1, type: 'bottom-desc' },\n React.createElement(_uxcoreSteps.Step, { key: 0, title: '步骤一', editable: true }),\n React.createElement(_uxcoreSteps.Step, { key: 1, title: '步骤二' }),\n React.createElement(_uxcoreSteps.Step, { key: 2, title: '步骤二' })\n ),\n React.createElement(\n _uxcoreSteps2.default,\n { current: 1, showIcon: false, type: 'bottom-desc' },\n React.createElement(_uxcoreSteps.Step, { key: 0, title: '步骤一', editable: true }),\n React.createElement(_uxcoreSteps.Step, { key: 1, title: '步骤二' }),\n React.createElement(_uxcoreSteps.Step, { key: 2, title: '步骤二' })\n ),\n React.createElement(\n _uxcoreSteps2.default,\n { current: 1, type: 'arrow-bar' },\n React.createElement(_uxcoreSteps.Step, { key: 0, title: '步骤一', editable: true }),\n React.createElement(_uxcoreSteps.Step, { key: 1, title: '步骤二' }),\n React.createElement(_uxcoreSteps.Step, { key: 2, title: '步骤二' })\n )\n), document.getElementById('components-steps-demo-editable'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> Steps, { Step } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-steps'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Steps</span> <span class=\"hljs-attribute\">current</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"bottom-desc\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{0}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤一'}</span> <span class=\"hljs-attribute\">editable</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤二'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{2}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤二'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Steps</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Steps</span> <span class=\"hljs-attribute\">current</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">showIcon</span>=<span class=\"hljs-value\">{false}</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"bottom-desc\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{0}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤一'}</span> <span class=\"hljs-attribute\">editable</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤二'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{2}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤二'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Steps</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Steps</span> <span class=\"hljs-attribute\">current</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"arrow-bar\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{0}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤一'}</span> <span class=\"hljs-attribute\">editable</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤二'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{2}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'步骤二'}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Steps</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n, document.getElementById('components-steps-demo-editable'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"自定义状态","id":"components-steps-demo-custom","tags":[],"filepath":"site/components/steps/demo/custom.md","directory":"components/steps/demo","filename":"custom","meta":{"title":"自定义状态","description":"\n<p>可以使用 status 定义每个步骤的状态。</p>\n","order":"8","filepath":"site/components/steps/demo/custom.md","filename":"custom","directory":"components/steps/demo","id":"components-steps-demo-custom","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcoreSteps = require('uxcore-steps');\n\nvar _uxcoreSteps2 = _interopRequireDefault(_uxcoreSteps);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar steps = [{\n status: 'finish',\n title: '已完成',\n description: '这里是多信息的描述啊'\n}, {\n status: 'process',\n title: '进行中',\n description: '这里是多信息的耶哦耶哦哦耶哦耶'\n}, {\n status: 'wait',\n title: '又一个待运行',\n description: '描述啊描述啊'\n}, {\n status: 'wait',\n title: '待运行',\n description: '这里是多信息的描述啊'\n}].map(function (s, i) {\n return React.createElement(_uxcoreSteps.Step, { key: i, title: s.title, status: s.status, description: s.description });\n});\nReactDOM.render(React.createElement(\n _uxcoreSteps2.default,\n { type: 'bottom-desc' },\n steps\n), document.getElementById('components-steps-demo-custom'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> Steps, { Step } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-steps'</span>;\n\n<span class=\"hljs-keyword\">const</span> steps = [{\n status: <span class=\"hljs-string\">'finish'</span>,\n title: <span class=\"hljs-string\">'已完成'</span>,\n description: <span class=\"hljs-string\">'这里是多信息的描述啊'</span>,\n}, {\n status: <span class=\"hljs-string\">'process'</span>,\n title: <span class=\"hljs-string\">'进行中'</span>,\n description: <span class=\"hljs-string\">'这里是多信息的耶哦耶哦哦耶哦耶'</span>,\n}, {\n status: <span class=\"hljs-string\">'wait'</span>,\n title: <span class=\"hljs-string\">'又一个待运行'</span>,\n description: <span class=\"hljs-string\">'描述啊描述啊'</span>,\n}, {\n status: <span class=\"hljs-string\">'wait'</span>,\n title: <span class=\"hljs-string\">'待运行'</span>,\n description: <span class=\"hljs-string\">'这里是多信息的描述啊'</span>,\n}].map((s, i) =&gt; (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Step</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{i}</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{s.title}</span> <span class=\"hljs-attribute\">status</span>=<span class=\"hljs-value\">{s.status}</span> <span class=\"hljs-attribute\">description</span>=<span class=\"hljs-value\">{s.description}</span> /&gt;</span>\n )</span>);\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Steps</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"bottom-desc\"</span>&gt;</span>{steps}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Steps</span>&gt;</span>\n, document.getElementById('components-steps-demo-custom'));</span></code></pre></div>"},"status":"public","toc":""}]

简单的步骤条。

import Steps, { Step } from 'uxcore-steps';

ReactDOM.render(
  <Steps current={2} type="bottom-desc">
    <Step key={0} title={'步骤一'} description="描述文案" />
    <Step key={1} title={'步骤二'} description="描述文案" />
    <Step key={2} title={'步骤三'} description="描述文案" />
    <Step key={3} title={'步骤四'} description="描述文案" />
  </Steps>
, document.getElementById('components-steps-demo-basic'));

迷你版的步骤条,通过设置 启用.

import Steps, { Step } from 'uxcore-steps';

ReactDOM.render(
  <Steps current={2} showIcon={false} type="bottom-desc">
    <Step key={0} title={'步骤一'} />
    <Step key={1} title={'步骤二'} />
    <Step key={2} title={'步骤三'} />
    <Step key={3} title={'步骤四'} />
  </Steps>
, document.getElementById('components-steps-demo-mini'));
import Steps, { Step } from 'uxcore-steps';

ReactDOM.render(
  <div style={{ width: '800px' }}>
    <Steps current={1} type="arrow-bar">
      <Step key={0} title={'步骤一'} />
      <Step key={1} title={'步骤二'} description="描述文案" />
      <Step key={2} title={'步骤三'} />
    </Steps>
  </div>
, document.getElementById('components-steps-demo-arrow'));

简单的竖直方向的步骤条。

import Steps, { Step } from 'uxcore-steps';

const steps = [{
  title: '已完成',
  description: '这里是多信息的描述啊',
}, {
  title: '进行中',
  description: '这里是多信息的耶哦耶哦哦耶哦耶',
}, {
  title: '又一个待运行',
  description: '描述啊描述啊',
}, {
  title: '待运行',
  description: '这里是多信息的描述啊',
}].map((s, i) => (
  <Step key={i} title={s.title} description={s.description} />
    ));

ReactDOM.render(
  <Steps direction="vertical" current={1}>{steps}</Steps>
, document.getElementById('components-steps-demo-vertical'));

简单的竖直方向的小型步骤条。

import Steps, { Step } from 'uxcore-steps';

const steps = [{
  title: '已完成',
  description: '这里是多信息的描述啊',
}, {
  title: '进行中',
  description: '这里是多信息的耶哦耶哦哦耶哦耶',
}, {
  title: '又一个待运行',
  description: '描述啊描述啊',
}, {
  title: '待运行',
  description: '这里是多信息的描述啊',
}].map((s, i) => (
  <Step key={i} title={s.title} description={s.description} />
    ));

ReactDOM.render(
  <Steps direction="vertical" showIcon={false} current={1}>{steps}</Steps>
, document.getElementById('components-steps-demo-verticalmini'));

每种风格都有对应的出错状态。

import Steps, { Step } from 'uxcore-steps';

ReactDOM.render(
  <div>
    <Steps current={1} type="bottom-desc">
      <Step key={0} title={'步骤一'} />
      <Step key={1} title={'步骤二'} status="error" />
      <Step key={2} title={'步骤三'} />
    </Steps>
    <Steps current={1} showIcon={false} type="bottom-desc">
      <Step key={0} title={'步骤一'} />
      <Step key={1} title={'步骤二'} status="error" />
      <Step key={2} title={'步骤三'} />
    </Steps>
    <Steps current={1} type="arrow-bar">
      <Step key={0} title={'步骤一'} />
      <Step key={1} title={'步骤二'} status="error" />
      <Step key={2} title={'步骤三'} />
    </Steps>
  </div>
, document.getElementById('components-steps-demo-error'));

对可返回编辑的 Step 做强调显示。

import Steps, { Step } from 'uxcore-steps';

ReactDOM.render(
  <div>
    <Steps current={1} type="bottom-desc">
      <Step key={0} title={'步骤一'} editable />
      <Step key={1} title={'步骤二'} />
      <Step key={2} title={'步骤二'} />
    </Steps>
    <Steps current={1} showIcon={false} type="bottom-desc">
      <Step key={0} title={'步骤一'} editable />
      <Step key={1} title={'步骤二'} />
      <Step key={2} title={'步骤二'} />
    </Steps>
    <Steps current={1} type="arrow-bar">
      <Step key={0} title={'步骤一'} editable />
      <Step key={1} title={'步骤二'} />
      <Step key={2} title={'步骤二'} />
    </Steps>
  </div>
, document.getElementById('components-steps-demo-editable'));

可以使用 status 定义每个步骤的状态。

import Steps, { Step } from 'uxcore-steps';

const steps = [{
  status: 'finish',
  title: '已完成',
  description: '这里是多信息的描述啊',
}, {
  status: 'process',
  title: '进行中',
  description: '这里是多信息的耶哦耶哦哦耶哦耶',
}, {
  status: 'wait',
  title: '又一个待运行',
  description: '描述啊描述啊',
}, {
  status: 'wait',
  title: '待运行',
  description: '这里是多信息的描述啊',
}].map((s, i) => (
  <Step key={i} title={s.title} status={s.status} description={s.description} />
    ));
ReactDOM.render(
  <Steps type="bottom-desc">{steps}</Steps>
, document.getElementById('components-steps-demo-custom'));

引导用户按照流程完成任务的导航条。

API

Props

Steps

配置项 说明 类型 可选值 默认值
prefixCls prefix class name string kuma-step
className additional class name added to wrap string
current 可选参数,指定当前处理正在执行状态的步骤,从0开始记数。在子Step元素中,可以通过status属性覆盖状态。 number 0
direction 可选参数,指定步骤条方向(目前支持水平和竖直两种方向,默认水平方向)。 string vertical
maxDescriptionWidth 可选参数,指定步骤的详细描述文字的最大宽度。 number 100
showIcon 步骤节点是否显示图标或数字 bool true or false true
type 步骤条类型 string default arrow-bar title-on-top long-desc or bottom-desc default
showDetail 可选参数[direction=vertical或type=long-desc不生效],是否显示详情面板[step的children] bool true false false
currentDetail 可选参数[direction=vertical或type=long-desc不生效],指定当前正在显示的详情面板,从0开始记数 number 0 ... 0
onChange 可选参数[direction=vertical或type=long-desc不生效],指定步骤icon点击事件回调,参数为被点击步骤对应数字 func (v)=>{}

Steps.Step

配置项 说明 类型 可选值 默认值
status 可选参数,指定状态。当不配置该属性时,会使用父Steps元素的current来自动指定状态。 string wait, process, finish, error wait
title 必要参数,标题。 string/jsx
description 可选参数,步骤的详情描述。 string/jsx
icon 可选参数,步骤的Icon。如果不指定,则使用默认的样式。 string/jsx
editable 可选参数,该步骤的内容是否可以返回编辑。 boolean true/false false

如果指定 editable 为 true,则该节点样式为可点击,使用需要配合传入 onChange 回调函数,回调函数将通过参数回传用户当前点击步骤的 key,可以通过 key 值来调整 current 或者需要显示的内容。