uxcore.js - React UI Component Set

组件演示

[{"title":"基本用法","id":"components-steps-demo-basic","tags":[],"filepath":"site/components/steps/demo/basic.md","directory":"components/steps/demo","filename":"basic","meta":{"title":"基本用法","description":"\n简单的步骤条。\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\">import Steps, { Step } from 'uxcore-steps';\n\nReactDOM.render(\n <Steps current={2} type=\"bottom-desc\">\n <Step key={0} title={'步骤一'} description=\"描述文案\" />\n <Step key={1} title={'步骤二'} description=\"描述文案\" />\n <Step key={2} title={'步骤三'} description=\"描述文案\" />\n <Step key={3} title={'步骤四'} description=\"描述文案\" />\n </Steps>\n, document.getElementById('components-steps-demo-basic'));</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迷你版的步骤条，通过设置 <Steps size=\"small\"> 启用.\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\">import Steps, { Step } from 'uxcore-steps';\n\nReactDOM.render(\n <Steps current={2} showIcon={false} type=\"bottom-desc\">\n <Step key={0} title={'步骤一'} />\n <Step key={1} title={'步骤二'} />\n <Step key={2} title={'步骤三'} />\n <Step key={3} title={'步骤四'} />\n </Steps>\n, document.getElementById('components-steps-demo-mini'));</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\">import Steps, { Step } from 'uxcore-steps';\n\nReactDOM.render(\n <div style={{ width: '800px' }}>\n <Steps current={1} type=\"arrow-bar\">\n <Step key={0} title={'步骤一'} />\n <Step key={1} title={'步骤二'} description=\"描述文案\" />\n <Step key={2} title={'步骤三'} />\n </Steps>\n </div>\n, document.getElementById('components-steps-demo-arrow'));</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简单的竖直方向的步骤条。\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\">import Steps, { Step } from 'uxcore-steps';\n\nconst steps = [{\n title: '已完成',\n description: '这里是多信息的描述啊',\n}, {\n title: '进行中',\n description: '这里是多信息的耶哦耶哦哦耶哦耶',\n}, {\n title: '又一个待运行',\n description: '描述啊描述啊',\n}, {\n title: '待运行',\n description: '这里是多信息的描述啊',\n}].map((s, i) => (\n <Step key={i} title={s.title} description={s.description} />\n ));\n\nReactDOM.render(\n <Steps direction=\"vertical\" current={1}>{steps}</Steps>\n, document.getElementById('components-steps-demo-vertical'));</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简单的竖直方向的小型步骤条。\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\">import Steps, { Step } from 'uxcore-steps';\n\nconst steps = [{\n title: '已完成',\n description: '这里是多信息的描述啊',\n}, {\n title: '进行中',\n description: '这里是多信息的耶哦耶哦哦耶哦耶',\n}, {\n title: '又一个待运行',\n description: '描述啊描述啊',\n}, {\n title: '待运行',\n description: '这里是多信息的描述啊',\n}].map((s, i) => (\n <Step key={i} title={s.title} description={s.description} />\n ));\n\nReactDOM.render(\n <Steps direction=\"vertical\" showIcon={false} current={1}>{steps}</Steps>\n, document.getElementById('components-steps-demo-verticalmini'));</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每种风格都有对应的出错状态。\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\">import Steps, { Step } from 'uxcore-steps';\n\nReactDOM.render(\n <div>\n <Steps current={1} type=\"bottom-desc\">\n <Step key={0} title={'步骤一'} />\n <Step key={1} title={'步骤二'} status=\"error\" />\n <Step key={2} title={'步骤三'} />\n </Steps>\n <Steps current={1} showIcon={false} type=\"bottom-desc\">\n <Step key={0} title={'步骤一'} />\n <Step key={1} title={'步骤二'} status=\"error\" />\n <Step key={2} title={'步骤三'} />\n </Steps>\n <Steps current={1} type=\"arrow-bar\">\n <Step key={0} title={'步骤一'} />\n <Step key={1} title={'步骤二'} status=\"error\" />\n <Step key={2} title={'步骤三'} />\n </Steps>\n </div>\n, document.getElementById('components-steps-demo-error'));</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对可返回编辑的 Step 做强调显示。\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\">import Steps, { Step } from 'uxcore-steps';\n\nReactDOM.render(\n <div>\n <Steps current={1} type=\"bottom-desc\">\n <Step key={0} title={'步骤一'} editable />\n <Step key={1} title={'步骤二'} />\n <Step key={2} title={'步骤二'} />\n </Steps>\n <Steps current={1} showIcon={false} type=\"bottom-desc\">\n <Step key={0} title={'步骤一'} editable />\n <Step key={1} title={'步骤二'} />\n <Step key={2} title={'步骤二'} />\n </Steps>\n <Steps current={1} type=\"arrow-bar\">\n <Step key={0} title={'步骤一'} editable />\n <Step key={1} title={'步骤二'} />\n <Step key={2} title={'步骤二'} />\n </Steps>\n </div>\n, document.getElementById('components-steps-demo-editable'));</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可以使用 status 定义每个步骤的状态。\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\">import Steps, { Step } from 'uxcore-steps';\n\nconst 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((s, i) => (\n <Step key={i} title={s.title} status={s.status} description={s.description} />\n ));\nReactDOM.render(\n <Steps type=\"bottom-desc\">{steps}</Steps>\n, document.getElementById('components-steps-demo-custom'));</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 或者需要显示的内容。