{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/navigation/steps","result":{"data":{"current":{"frontmatter":{"title":"Steps 步骤","order":59,"brief":"将复杂任务或存在先后关系的任务分解，使用步骤组件引导用户按规定流程操作，并让其知道其当前的进度","icon":"doc-steps"},"fields":{"type":"navigation"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#默认步骤条旧版","title":"默认步骤条（旧版）"},{"url":"#简单步骤条新版","title":"简单步骤条（新版）"},{"url":"#导航步骤条","title":"导航步骤条"},{"url":"#迷你尺寸步骤条","title":"迷你尺寸步骤条"},{"url":"#处理进度","title":"处理进度"},{"url":"#竖直方向的步骤条","title":"竖直方向的步骤条"},{"url":"#指定步骤状态","title":"指定步骤状态"},{"url":"#自定义图标状态","title":"自定义图标/状态"},{"url":"#onchange-回调","title":"onChange 回调"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#steps","title":"Steps"},{"url":"#stepsstep","title":"Steps.Step"}]},{"url":"#文案规范","title":"文案规范"},{"url":"#设计变量","title":"设计变量"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 59,\n  \"category\": \"导航类\",\n  \"title\": \"Steps 步骤\",\n  \"icon\": \"doc-steps\",\n  \"dir\": \"column\",\n  \"brief\": \"将复杂任务或存在先后关系的任务分解，使用步骤组件引导用户按规定流程操作，并让其知道其当前的进度\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Steps } from '@douyinfe/semi-ui';\\nconst Step = Steps.Step;\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u6B65\\u9AA4\\u6761\\uFF08\\u65E7\\u7248\\uFF09\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5EFA\\u8BAE\\u4F7F\\u7528\\u7B80\\u6613\\u7248 steps\\uFF08\\u65B0\\u7248\\uFF09\\uFF0C\\u65E7\\u7248\\u540E\\u7EED\\u4F1A\\u9010\\u6E10 deprecate\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Steps } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Steps current={1} onChange={(i)=>console.log(i)}>\\n        <Steps.Step title=\\\"Finished\\\" description=\\\"This is a description\\\" />\\n        <Steps.Step title=\\\"In Progress\\\" description=\\\"This is a description\\\" />\\n        <Steps.Step title=\\\"Waiting\\\" description=\\\"This is a description\\\" />\\n    </Steps>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7B80\\u5355\\u6B65\\u9AA4\\u6761\\uFF08\\u65B0\\u7248\\uFF09\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E type=\\\"basic\\\" \\u663E\\u793A\\u4E3A\\u7B80\\u6D01\\u98CE\\u683C\\u6B65\\u9AA4\\u6761\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Steps } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Steps type=\\\"basic\\\" current={1} onChange={(i)=>console.log(i)}>\\n        <Steps.Step title=\\\"Finished\\\" description=\\\"This is a description\\\" />\\n        <Steps.Step title=\\\"In Progress\\\" description=\\\"This is a description\\\" />\\n        <Steps.Step title=\\\"Waiting\\\" description=\\\"This is a description\\\" />\\n    </Steps>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5BFC\\u822A\\u6B65\\u9AA4\\u6761\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E type=\\\"nav\\\" \\u663E\\u793A\\u4E3A\\u5BFC\\u822A\\u98CE\\u683C\\u6B65\\u9AA4\\u6761\\u3002\\u5BFC\\u822A\\u98CE\\u683C\\u7684\\u6B65\\u9AA4\\u6761\\u6709\\u4EE5\\u4E0B\\u7279\\u70B9\\uFF1A\"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u6B65\\u9AA4\\u6761\\u4E0D\\u652F\\u6301\\u4EA4\\u4E92\\u3002\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u9002\\u7528\\u4E8E\\u6B65\\u9AA4\\u95F4\\u4E92\\u76F8\\u5173\\u8054\\u8F83\\u5C0F\\uFF0C\\u5185\\u5BB9\\u4E92\\u4E0D\\u5F71\\u54CD\\uFF0C\\u4E14\\u9700\\u8981\\u7A81\\u51FA\\u9875\\u9762\\u89C6\\u89C9\\u5143\\u7D20\\u65F6\\u4F7F\\u7528\\u3002\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u6B65\\u9AA4\\u6761\\u7684\\u5BBD\\u5EA6\\u6309\\u7167\\u5185\\u5BB9\\u7269\\u6491\\u5F00\\u3002\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Steps.Step \\u4EC5\\u652F\\u6301title\\u3001className\\u3001style \\u5C5E\\u6027\\u3002\"))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Steps } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div style={{ display: 'flex', justifyContent: 'center' }}>\\n        <Steps type=\\\"nav\\\" current={1} style={{ margin: 'auto' }} onChange={(i)=>console.log(i)}>\\n            <Steps.Step title=\\\"\\u6CE8\\u518C\\u8D26\\u53F7\\\" />\\n            <Steps.Step title=\\\"\\u8FD9\\u4E2A\\u9879\\u76EE\\u7684\\u6587\\u5B57\\u6BD4\\u8F83\\u591A\\u591A\\u591A\\u591A\\\" />\\n            <Steps.Step title=\\\"\\u4EA7\\u54C1\\u7528\\u9014\\\" />\\n            <Steps.Step title=\\\"\\u671F\\u5F85\\u5C1D\\u8BD5\\u529F\\u80FD\\\" />\\n        </Steps>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8FF7\\u4F60\\u5C3A\\u5BF8\\u6B65\\u9AA4\\u6761\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E size=\\\"small\\\" \\u663E\\u793A\\u8FF7\\u4F60\\u5C3A\\u5BF8\\u6B65\\u9AA4\\u6761\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Steps } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Steps type=\\\"basic\\\" size=\\\"small\\\" current={1} onChange={(i)=>console.log(i)}>\\n        <Steps.Step title=\\\"Finished\\\" description=\\\"This is a description\\\" />\\n        <Steps.Step title=\\\"In Progress\\\" description=\\\"This is a description\\\" />\\n        <Steps.Step title=\\\"Waiting\\\" description=\\\"This is a description\\\" />\\n    </Steps>\\n);\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Steps } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div style={{ display: 'flex', justifyContent: 'center' }}>\\n        <Steps type=\\\"nav\\\" size=\\\"small\\\" current={1} style={{ margin: 'auto' }} onChange={(i)=>console.log(i)}>\\n            <Steps.Step title=\\\"\\u6CE8\\u518C\\u8D26\\u53F7\\\" />\\n            <Steps.Step title=\\\"\\u8FD9\\u4E2A\\u9879\\u76EE\\u7684\\u6587\\u5B57\\u6BD4\\u8F83\\u591A\\u591A\\u591A\\u591A\\\" />\\n            <Steps.Step title=\\\"\\u4EA7\\u54C1\\u7528\\u9014\\\" />\\n            <Steps.Step title=\\\"\\u671F\\u5F85\\u5C1D\\u8BD5\\u529F\\u80FD\\\" />\\n        </Steps>\\n    </div>\\n);\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5904\\u7406\\u8FDB\\u5EA6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u914D\\u5408\\u5185\\u5BB9\\u53CA\\u6309\\u94AE\\u4F7F\\u7528\\uFF0C\\u8868\\u793A\\u4E00\\u4E2A\\u6D41\\u7A0B\\u7684\\u5904\\u7406\\u8FDB\\u5EA6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState } from 'react';\\nimport { Steps, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [current, setCurrent] = useState(0);\\n    const { Step } = Steps;\\n    const steps = [\\n        {\\n            title: 'First',\\n            content: 'First-content',\\n        },\\n        {\\n            title: 'Second',\\n            content: 'Second-content',\\n        },\\n        {\\n            title: 'Last',\\n            content: 'Last-content',\\n        },\\n    ];\\n\\n    const next = () => {\\n        setCurrent(current + 1);\\n    };\\n\\n    const prev = () => {\\n        setCurrent(current - 1);\\n    };\\n\\n    return (\\n        <div>\\n            <Steps type=\\\"basic\\\" current={current} onChange={(i)=>console.log(i)}>\\n                {steps.map(item => (\\n                    <Step key={item.title} title={item.title} />\\n                ))}\\n            </Steps>\\n            <div className=\\\"steps-content\\\" style={{ marginTop: 4, marginBottom: 4 }}>{steps[current].content}</div>\\n            <div className=\\\"steps-action\\\">\\n                {current < steps.length - 1 && (\\n                    <Button type=\\\"primary\\\" onClick={next}>\\n                        Next\\n                    </Button>\\n                )}\\n                {current === steps.length - 1 && (\\n                    <Button type=\\\"primary\\\" onClick={() => console.log('Processing complete!')}>\\n                        Done\\n                    </Button>\\n                )}\\n                {current > 0 && (\\n                    <Button style={{ marginLeft: 8 }} onClick={prev}>\\n                        Previous\\n                    </Button>\\n                )}\\n            </div>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7AD6\\u76F4\\u65B9\\u5411\\u7684\\u6B65\\u9AA4\\u6761\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"direction\"), \"\\uFF0C\\u4F7F\\u7528\\u7AD6\\u76F4\\u65B9\\u5411\\u7684\\u6B65\\u9AA4\\u6761\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Steps } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Steps direction=\\\"vertical\\\" current={1} style={{ width: 300 }} onChange={(i)=>console.log(i)}>\\n        <Steps.Step title=\\\"Finished\\\" description=\\\"This is a description\\\" />\\n        <Steps.Step title=\\\"In Progress\\\" description=\\\"This is a description\\\" />\\n        <Steps.Step title=\\\"Waiting\\\" description=\\\"This is a description\\\" />\\n    </Steps>\\n);\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Steps } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Steps direction=\\\"vertical\\\" type=\\\"basic\\\" current={1} onChange={(i)=>console.log(i)}>\\n        <Steps.Step title=\\\"Finished\\\" description=\\\"This is a description\\\" />\\n        <Steps.Step title=\\\"In Progress\\\" description=\\\"This is a description\\\" />\\n        <Steps.Step title=\\\"Waiting\\\" description=\\\"This is a description\\\" />\\n    </Steps>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6307\\u5B9A\\u6B65\\u9AA4\\u72B6\\u6001\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6B65\\u9AA4\\u8FD0\\u884C\\u9519\\u8BEF\\uFF0C\\u4F7F\\u7528 Steps \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"status\"), \" \\u5C5E\\u6027\\u6765\\u6307\\u5B9A\\u5F53\\u524D\\u6B65\\u9AA4\\u7684\\u72B6\\u6001\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Steps } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Steps type=\\\"basic\\\" current={1} status=\\\"error\\\" onChange={(i)=>console.log(i)}>\\n        <Steps.Step title=\\\"Finished\\\" description=\\\"This is a description\\\" />\\n        <Steps.Step title=\\\"In Process\\\" description=\\\"This is a description\\\" />\\n        <Steps.Step title=\\\"Waiting\\\" description=\\\"This is a description\\\" />\\n    </Steps>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u56FE\\u6807/\\u72B6\\u6001\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E Steps.Step \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"icon\"), \" \\u5C5E\\u6027\\uFF0C\\u53EF\\u4EE5\\u542F\\u7528\\u81EA\\u5B9A\\u4E49\\u56FE\\u6807\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u901A\\u8FC7\\u8BBE\\u7F6E Steps.Step \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"status\"), \" \\u5C5E\\u6027\\uFF0C\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u6BCF\\u4E2A step \\u7684\\u72B6\\u6001\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Steps } from '@douyinfe/semi-ui';\\nimport { IconHome, IconLock } from '@douyinfe/semi-icons';\\n\\n() => (\\n    <Steps type=\\\"basic\\\" onChange={(i)=>console.log(i)}>\\n        <Steps.Step status=\\\"finish\\\" title=\\\"\\u5DF2\\u5B8C\\u6210\\\" />\\n        <Steps.Step status=\\\"error\\\" title=\\\"\\u9519\\u8BEF\\\" />\\n        <Steps.Step status=\\\"warning\\\" title=\\\"\\u8B66\\u544A\\\" />\\n        <Steps.Step status=\\\"process\\\" title=\\\"\\u6B63\\u5728\\u8FDB\\u884C\\\" icon={<IconHome size=\\\"extra-large\\\" />} />\\n        <Steps.Step status=\\\"wait\\\" title=\\\"\\u7B49\\u5F85\\\" icon={<IconLock size=\\\"extra-large\\\" />} />\\n    </Steps>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"onChange \\u56DE\\u8C03\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4ECE 1.29.0 \\u7248\\u672C\\u5F00\\u59CB\\u652F\\u6301 onChange\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u6765\\u5B9E\\u73B0\\u5904\\u7406\\u8FDB\\u5EA6\\u3002onChange \\u63A5\\u6536\\u4E00\\u4E2A number \\u7C7B\\u578B\\u7684\\u53C2\\u6570\\uFF0C\\u8BE5\\u53C2\\u6570\\u7B49\\u4E8E initial + current\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"hideInDSM\": true\n  }, \"import React, { useState } from 'react';\\nimport { Steps } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [current, setCurrent] = useState(1);\\n    const { Step } = Steps;\\n    const steps = [\\n        {\\n            title: 'First',\\n            content: 'First-content',\\n        },\\n        {\\n            title: 'Second',\\n            content: 'Second-content',\\n        },\\n        {\\n            title: 'Last',\\n            content: 'Last-content',\\n        },\\n    ];\\n\\n    const onChange = (index) => {\\n        setCurrent(index);\\n    };\\n\\n    return (\\n        <div>\\n            <Steps type=\\\"basic\\\" current={current} onChange={onChange}>\\n                {steps.map(item => (\\n                    <Step key={item.title} title={item.title} />\\n                ))}\\n            </Steps>\\n        </div>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Steps\\u3001Step\\u7EC4\\u4EF6\\u652F\\u6301\\u4F20\\u5165\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \"\\u5C5E\\u6027\\uFF0C\\u6765\\u8868\\u793ASteps\\u548CStep\\u7684\\u63CF\\u8FF0\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step\\u7EC4\\u4EF6\\u5177\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-current\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"step\"), \" \\u5C5E\\u6027\\uFF0C\\u8868\\u793A\\u8FD9\\u662F\\u6B65\\u9AA4\\u6761\\u5185\\u7684\\u4E00\\u6B65\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Steps\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6574\\u4F53\\u6B65\\u9AA4\\u6761\\u3002\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53C2\\u6570\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"current\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u5F53\\u524D\\u6B65\\u9AA4\\uFF0C\\u4ECE 0 \\u5F00\\u59CB\\u8BB0\\u6570\\u3002\\u5728\\u5B50 Step \\u5143\\u7D20\\u4E2D\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"status\"), \" \\u5C5E\\u6027\\u8986\\u76D6\\u72B6\\u6001\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"direction\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u6B65\\u9AA4\\u6761\\u65B9\\u5411\\u3002\\u76EE\\u524D\\u652F\\u6301\\u6C34\\u5E73\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"horizontal\"), \"\\uFF09\\u548C\\u7AD6\\u76F4\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical\"), \"\\uFF09\\u4E24\\u79CD\\u65B9\\u5411\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"horizontal\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hasLine\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6B65\\u9AA4\\u6761\\u7C7B\\u578B\\u4E3Abasic\\u65F6\\uFF0C\\u53EF\\u63A7\\u5236\\u662F\\u5426\\u663E\\u793A\\u8FDE\\u63A5\\u7EBF\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.18.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"initial\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8D77\\u59CB\\u5E8F\\u53F7\\uFF0C\\u4ECE 0 \\u5F00\\u59CB\\u8BB0\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"status\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u5F53\\u524D\\u6B65\\u9AA4\\u7684\\u72B6\\u6001\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"wait\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"process\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"finish\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"error\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"process\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BF9\\u4E8E\\u7B80\\u5355\\u6B65\\u9AA4\\u6761\\u548C\\u5BFC\\u822A\\u6B65\\u9AA4\\u6761\\uFF0C\\u53EF\\u9009\\u5C3A\\u5BF8\\u5C3A\\u5BF8\\uFF0C\\u503C\\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.18.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6B65\\u9AA4\\u6761\\u7C7B\\u578B\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fill\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"basic\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"nav\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fill\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.18.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6539\\u53D8\\u6B65\\u9AA4\\u6761\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(index: number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.29.0\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Steps.Step\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6B65\\u9AA4\\u6761\\u5185\\u7684\\u6BCF\\u4E00\\u4E2A\\u6B65\\u9AA4\\u3002\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53C2\\u6570\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"aria-label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BB9\\u5668aria-label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.AriaAttributes\", \"[\\\"aria-label\\\"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"description\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6B65\\u9AA4\\u7684\\u8BE6\\u60C5\\u63CF\\u8FF0\\uFF0C\\u53EF\\u9009\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6B65\\u9AA4\\u56FE\\u6807\\u7684\\u7C7B\\u578B\\uFF0C\\u53EF\\u9009\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"role\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BB9\\u5668role\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.AriaRole\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"status\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u72B6\\u6001\\u3002\\u5F53\\u4E0D\\u914D\\u7F6E\\u8BE5\\u5C5E\\u6027\\u65F6\\uFF0C\\u4F1A\\u4F7F\\u7528 Steps \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"current\"), \" \\u6765\\u81EA\\u52A8\\u6307\\u5B9A\\u72B6\\u6001\\u3002\\u53EF\\u9009\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"wait\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"process\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"finish\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"error\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"wait\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6807\\u9898\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onKeyDown\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56DE\\u8F66\\u4E8B\\u4EF6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6B65\\u9AA4\\u6807\\u9898\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6807\\u9898\\u5E94\\u4FDD\\u6301\\u7B80\\u6D01\\uFF0C\\u907F\\u514D\\u622A\\u65AD\\u548C\\u6362\\u884C\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F7F\\u7528\\u53E5\\u5B50\\u5927\\u5C0F\\u5199\\u4E66\\u5199\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E0D\\u8981\\u5305\\u542B\\u6807\\u70B9\\u7B26\\u53F7\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u63CF\\u8FF0\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E3A\\u6807\\u9898\\u8865\\u5145\\u4E0A\\u4E0B\\u6587\\u4FE1\\u606F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E0D\\u8981\\u4EE5\\u6807\\u70B9\\u7B26\\u53F7\\u7ED3\\u5C3E\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/navigation/steps","next":{"fields":{"slug":"en-US/navigation/tabs"},"id":"03fda42d-7c01-57b2-83e8-fe8c72287c10","frontmatter":{"title":"Tabs","localeCode":"en-US","icon":"doc-tabs","showNew":null}},"previous":{"fields":{"slug":"en-US/navigation/steps"},"id":"56c27928-ab99-5c6c-8ecc-ec987b65c5b8","frontmatter":{"title":"Steps","localeCode":"en-US","icon":"doc-steps","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}