{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/navigation/steps","result":{"data":{"current":{"frontmatter":{"title":"Steps","order":59,"brief":"Decompose complex tasks or tasks with prior relationships, use step components to guide users to operate according to the prescribed process, and let them know their current progress","icon":"doc-steps"},"fields":{"type":"navigation"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#default-step-bardeprecated","title":"Default step bar(Deprecated)"},{"url":"#basic-stepsrecommended","title":"Basic Steps(Recommended)"},{"url":"#nav-steps","title":"Nav Steps"},{"url":"#mini-size-step-bar","title":"Mini size step bar"},{"url":"#processing-progress","title":"Processing progress"},{"url":"#steps-bar-in-vertical-direction","title":"Steps bar in vertical direction"},{"url":"#specify-step-status","title":"Specify step status"},{"url":"#custom-icons","title":"Custom icons"},{"url":"#onchange-callback","title":"onChange CallBack"}]},{"url":"#api-reference","title":"API reference","items":[{"url":"#steps","title":"Steps"},{"url":"#stepsstep","title":"Steps.Step"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"}]},"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\": \"en-US\",\n  \"order\": 59,\n  \"category\": \"Navigation\",\n  \"title\": \"Steps\",\n  \"subTitle\": \"Steps\",\n  \"icon\": \"doc-steps\",\n  \"dir\": \"column\",\n  \"brief\": \"Decompose complex tasks or tasks with prior relationships, use step components to guide users to operate according to the prescribed process, and let them know their current progress\"\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  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Steps } from '@douyinfe/semi-ui';\\nconst Step = Steps.Step;\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Default step bar(Deprecated)\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"It is recommended to use the simple version of steps, which will be gradually deprecated later\"), 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  }, \"Basic Steps(Recommended)\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Set type=\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\\"basic\\\"\"), \" to display a simple style step bar\"), 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\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Nav Steps\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use type=\\\"nav\\\" to set the navigation style step bar. The navigation style step bar has the following characteristics:\"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"The step bar does not support interaction.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"It is suitable when the steps are not related to each other, the content does not affect each other, and the visual elements of the page need to be highlighted.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"The width of the step bar is opened according to the content.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Steps.Step only supports title, className, and style attributes.\"))), 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=\\\"Register an account\\\" />\\n            <Steps.Step title=\\\"There is a lot of text in this project\\\" />\\n            <Steps.Step title=\\\"Product Usage\\\" />\\n            <Steps.Step title=\\\"Looking forward to trying out features\\\" />\\n        </Steps>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Mini size step bar\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Display the mini size step bar by setting size=\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\\"small\\\"\")), 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=\\\"Register an account\\\" />\\n            <Steps.Step title=\\\"There is a lot of text in this project\\\" />\\n            <Steps.Step title=\\\"Product Usage\\\" />\\n            <Steps.Step title=\\\"Looking forward to trying out features\\\" />\\n        </Steps>\\n    </div>  \\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Processing progress\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use with content and buttons to represent the processing progress of a process\"), 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 }}>\\n                {steps[current].content}\\n            </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  }, \"Steps bar in vertical direction\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Show steps in vertical direction by setting direction\"), 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  }, \"Specify step status\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Using Steps \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"status\"), \" Property to specify the state of the current step.\"), 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  }, \"Custom icons\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"By setting Steps.Step's \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"icon\"), \" Properties, you can use custom icons.\"), 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, IconClear, IconTickCircle } from '@douyinfe/semi-icons';\\n\\n() => (\\n    <Steps type=\\\"basic\\\" onChange={(i)=>console.log(i)}>\\n        <Steps.Step status=\\\"finish\\\" title=\\\"Login\\\" icon={<IconHome />} />\\n        <Steps.Step status=\\\"finish\\\" title=\\\"Verification\\\" icon={<IconLock />} />\\n        <Steps.Step status=\\\"process\\\" title=\\\"Pay\\\" icon={<IconClear />} />\\n        <Steps.Step status=\\\"wait\\\" title=\\\"Done\\\" icon={<IconTickCircle />} />\\n    </Steps>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"onChange CallBack\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Since version 1.29.0, onChange is supported, which can be used to realize the processing progress. onChange receives a parameter of type number, which is equal to initial + current.\"), 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 } 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  }, \"API reference\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Steps\"), 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  }, \"Parameters\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Version\"))), 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  }, \"Class name\"), 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  }, \"Specifies the current step, counting from 0. In the subStep element, the state can be overridden by the \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"status\"), \" attribute\"), 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  }, \"Specify step bar directions. Currently support level (\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical\"), \") and vertical (\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical\"), \") in both directions\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"with\"), 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  }, \"When the step bar type is basic, you can control whether to display the connecting line\"), 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  }, \"Start serial number, count from 0.\"), 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  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"For simple step bar and navigation step bar, the size is optional, the value is \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \", \", 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  }, \"status\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specify the status of the current step, optional \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"wait\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"process\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"finish\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"error\"), \",\", 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  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style\"), 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  }, \"Steps type, optional \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fill\"), \" \", 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  }, \"onChange callback\"), 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  }, \"Step in the step bar.\"), 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  }, \"Parameters\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Version\"))), 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  }, \"Container aria-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  }, \"description\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Detailed description of steps, optional\"), 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  }, \"Type of step icon, optional\"), 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  }, \"Container role\"), 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  }, \"Specify the state. When this property is not configured, the \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"current\"), \"of Steps is used to automatically specify the state. Optional: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"wait\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"process\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"finish\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"error\"), \",\", 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  }, \"CSS Style\"), 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  }, \"Title\"), 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  }, \"Callback of click\"), 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  }, \"Callback ok keyDown\"), 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  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Steps and Step components support passing in the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" attribute to represent the description of Steps and Steps\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step component has an \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-current\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"step\"), \" attribute, indicating that this is a step in the step bar\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Content Guidelines\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step title\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"title should be kept concise, avoiding truncation and line breaks\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"use sentence capitalization\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"do not include punctuation\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step description\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"supplementary contextual information for the title\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"don't end with punctuation\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/navigation/steps","next":{"fields":{"slug":"zh-CN/navigation/steps"},"id":"dc06f82c-9951-5346-8605-b86f38cd68ea","frontmatter":{"title":"Steps 步骤","localeCode":"zh-CN","icon":"doc-steps","showNew":null}},"previous":{"fields":{"slug":"zh-CN/navigation/pagination"},"id":"0e3535ce-827f-5939-86c8-98f4f072d4be","frontmatter":{"title":"Pagination 翻页器","localeCode":"zh-CN","icon":"doc-pagination","showNew":null}}}},"staticQueryHashes":["1348983216898582","1477422646898582","3245198693898582","417590761898582","63159454898582"]}