@uiw/doc/web/static/js/3864.fbb502dc.chunk.js

UIW documentation website.

(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3864],{4934:e=>{function t(e){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}t.keys=()=>[],t.resolve=t,t.id=4934,e.exports=t},5301:(e,t,n)=>{"use strict";n.d(t,{Z:()=>S});var r=n(8573),u=n(6320),i=n(8563),a=n(7622),o=n(7937);const s={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var l=n(4760);function p(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:t}=e,n=/^http/.test(t||"")?t:"https://github.com/uiwjs/uiw/blob/master/".concat(t);return(0,l.jsxs)("div",{className:s.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",n&&(0,l.jsx)("a",{href:n,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,l.jsx)("br",{}),(0,l.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,l.jsx)(o.Divider,{type:"vertical"}),(0,l.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,l.jsx)(o.Divider,{type:"vertical"}),(0,l.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,l.jsx)(o.Divider,{type:"vertical"}),(0,l.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,l.jsx)(o.Divider,{type:"vertical"}),(0,l.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,l.jsx)(o.Divider,{type:"vertical"}),(0,l.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const c=u.ZP.Preview,d=u.ZP.Code,f=u.ZP.Toolbar,_=e=>{var t,n;let{node:a,components:o,data:s,...p}=e;const _=(0,r.useRef)(null),{headings:S,headingsList:m,...E}=p;(0,r.useEffect)((()=>{if(_.current){const e=_.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(_.current,e)}}),[_]);const F=null===a||void 0===a||null===(t=a.position)||void 0===t?void 0:t.start.line,g=null===a||void 0===a||null===(n=a.data)||void 0===n?void 0:n.meta,y=(0,i.Mx)(g)||String(F),C=o["".concat(y)];if(y&&"function"===typeof C){const e=s[y].value||"",t=(0,i.aE)(g||"");return(0,l.jsxs)(u.ZP,{ref:_,children:[(0,l.jsx)(c,{style:{background:t.bg||"transparent"},children:(0,l.jsx)(C,{})}),(0,l.jsx)(f,{text:e,children:t.title||"Example"}),(0,l.jsx)(d,{children:(0,l.jsx)("pre",{...E})})]})}return(0,l.jsx)("code",{...E})};function S(e){return(0,l.jsxs)(r.Fragment,{children:[(0,l.jsx)(a.Z,{className:s.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:t=>(0,l.jsx)(_,{...e,...t})}}),(0,l.jsx)(p,{path:e.path})]})}},2129:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});const r={components:{21:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);return function(){return t.default.createElement(r.Steps,{current:1,style:{padding:"20px 0"}},t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e00",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}),t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e8c",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}),t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e09",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}),t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u56db",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}))}}(),41:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);return function(){return t.default.createElement(r.Steps,{current:1,style:{padding:"20px 0"}},t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e00"}),t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e8c"}),t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e09"}),t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u56db"}))}}(),61:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);return function(){return t.default.createElement(r.Steps,{current:1,style:{padding:"20px 0"}},t.default.createElement(r.Steps.Step,{icon:t.default.createElement(r.Icon,{type:"user"}),title:"\u6ce8\u518c",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}),t.default.createElement(r.Steps.Step,{icon:t.default.createElement(r.Icon,{type:"picasa",spin:!0,color:"red"}),title:"\u4e0a\u4f20\u5934\u50cf",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}),t.default.createElement(r.Steps.Step,{icon:"message",title:"\u9a8c\u8bc1\u90ae\u7bb1",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}))}}(),80:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);return function(){return t.default.createElement(r.Steps,{current:2,status:"error",style:{padding:"20px 0"}},t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e00",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}),t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e8c",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}),t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e09",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}),t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u56db",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}))}}(),100:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);return function(){return t.default.createElement(r.Steps,{progressDot:!0,status:"error",current:2,style:{padding:"20px 0"}},t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e00",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}),t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e8c",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}),t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e09",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}),t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u56db",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}))}}(),120:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,u,i,a,o=[],s=!0,l=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(r=i.call(n)).done)&&(o.push(r.value),o.length!==t);s=!0);}catch(e){l=!0,u=e}finally{try{if(!s&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(l)throw u}}return o}}(e,t)||function(e,t){if(!e)return;if("string"===typeof e)return i(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return i(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var a={minHeight:200,backgroundColor:"#fafafa",textAlign:"center",borderRadius:6,paddingTop:80,marginTop:15},o=[{title:"\u7b2c\u4e00\u6b65",content:"\u6ce8\u518c\u4e00\u4e2a\u8d26\u53f7"},{title:"\u7b2c\u4e8c\u6b65",content:"\u586b\u5199\u4e2a\u4eba\u4fe1\u606f\u3002"},{title:"\u7b2c\u4e09\u6b65",content:"\u9a8c\u8bc1\u90ae\u7bb1"}];return function(){var e=u(t.default.useState(0),2),n=e[0],i=e[1];return t.default.createElement("div",null,t.default.createElement(r.Steps,{current:n},o.map((function(e){return t.default.createElement(r.Steps.Step,{key:e.title,title:e.title})}))),t.default.createElement("div",{style:a},o[n].content),t.default.createElement("div",{style:{marginTop:20}},n<o.length-1&&t.default.createElement(r.Button,{type:"primary",size:"small",onClick:function(){return i(n+1)}},"\u4e0b\u4e00\u6b65"),n===o.length-1&&t.default.createElement(r.Button,{type:"primary",size:"small",onClick:function(){return r.Notify.open({description:"\u5904\u7406\u5b8c\u6210!"})}},"\u5b8c\u6210"),n>0&&t.default.createElement(r.Button,{size:"small",style:{marginLeft:8},onClick:function(){return i(n-1)}},"\u4e0a\u4e00\u6b65")))}}(),168:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);return function(){return t.default.createElement(r.Row,{gutter:20},t.default.createElement(r.Col,null,t.default.createElement(r.Steps,{current:1,direction:"vertical",style:{padding:"20px 0"}},t.default.createElement(r.Steps.Step,{title:"\u5df2\u5b8c\u6210",description:"\u8fd9\u91cc\u662f\u8be5\u6b65\u9aa4\u7684\u63cf\u8ff0\u4fe1\u606f"}),t.default.createElement(r.Steps.Step,{title:"\u8fdb\u884c\u4e2d",description:"\u8fd9\u91cc\u662f\u8be5\u6b65\u9aa4\u7684\u63cf\u8ff0\u4fe1\u606f"}),t.default.createElement(r.Steps.Step,{status:"error",title:"\u5f85\u8fdb\u884c",description:"\u8fd9\u91cc\u662f\u8be5\u6b65\u9aa4\u7684\u63cf\u8ff0\u4fe1\u606f"}),t.default.createElement(r.Steps.Step,{title:"\u5f85\u8fdb\u884c",description:"\u8fd9\u91cc\u662f\u8be5\u6b65\u9aa4\u7684\u63cf\u8ff0\u4fe1\u606f"}))),t.default.createElement(r.Col,null,t.default.createElement(r.Steps,{direction:"vertical",progressDot:!0,status:"error",current:2,style:{padding:"20px 0"}},t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e00",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}),t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e8c",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}),t.default.createElement(r.Steps.Step,{title:"\u6b65\u9aa4\u4e09",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}),t.default.createElement(r.Steps.Step,{icon:t.default.createElement(r.Icon,{type:"user"}),title:"\u6b65\u9aa4\u56db",description:"\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002"}))))}}()},data:{21:{name:21,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Steps, {\n    current: 1,\n    style: {\n      padding: "20px 0"\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E00",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E8C",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E09",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u56DB",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }));\n};',language:"jsx",value:'import React from \'react\';\nimport { Steps } from \'uiw\';\n\nexport default function Demo() {\n  return (\n    <Steps current={1} style={{ padding:"20px 0" }}>\n      <Steps.Step title="\u6b65\u9aa4\u4e00" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u4e8c" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u4e09" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u56db" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n    </Steps>\n  )\n}'},41:{name:41,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Steps, {\n    current: 1,\n    style: {\n      padding: "20px 0"\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E00"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E8C"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E09"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u56DB"\n  }));\n};',language:"jsx",value:'import React from \'react\';\nimport { Steps } from \'uiw\';\n\nexport default function Demo() {\n  return (\n    <Steps current={1} style={{padding:"20px 0"}}>\n      <Steps.Step title="\u6b65\u9aa4\u4e00" />\n      <Steps.Step title="\u6b65\u9aa4\u4e8c" />\n      <Steps.Step title="\u6b65\u9aa4\u4e09" />\n      <Steps.Step title="\u6b65\u9aa4\u56db" />\n    </Steps>\n  )\n}'},61:{name:61,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Steps, {\n    current: 1,\n    style: {\n      padding: "20px 0"\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    icon: /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n      type: "user"\n    }),\n    title: "\\u6CE8\\u518C",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    icon: /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n      type: "picasa",\n      spin: true,\n      color: "red"\n    }),\n    title: "\\u4E0A\\u4F20\\u5934\\u50CF",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    icon: "message",\n    title: "\\u9A8C\\u8BC1\\u90AE\\u7BB1",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }));\n};',language:"jsx",value:'import React from \'react\';\nimport { Steps, Icon } from \'uiw\';\n\nexport default function Demo() {\n  return (\n    <Steps current={1} style={{padding:"20px 0"}}>\n      <Steps.Step icon={<Icon type="user"/>} title="\u6ce8\u518c" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step icon={<Icon type="picasa" spin={true} color="red" />} title="\u4e0a\u4f20\u5934\u50cf" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step icon="message" title="\u9a8c\u8bc1\u90ae\u7bb1" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n    </Steps>\n  )\n}'},80:{name:80,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Steps, {\n    current: 2,\n    status: "error",\n    style: {\n      padding: "20px 0"\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E00",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E8C",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E09",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u56DB",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }));\n};',language:"jsx",value:'import React from \'react\';\nimport { Steps } from \'uiw\';\n\nexport default function Demo() {\n  return (\n    <Steps current={2} status="error" style={{padding:"20px 0"}}>\n      <Steps.Step title="\u6b65\u9aa4\u4e00" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u4e8c" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u4e09" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u56db" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n    </Steps>\n  )\n}'},100:{name:100,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Steps, {\n    progressDot: true,\n    status: "error",\n    current: 2,\n    style: {\n      padding: "20px 0"\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E00",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E8C",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E09",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u56DB",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }));\n};',language:"jsx",value:'import React from \'react\';\nimport { Steps } from \'uiw\';\n\nexport default function Demo() {\n  return (\n    <Steps progressDot status="error" current={2} style={{padding:"20px 0"}}>\n      <Steps.Step title="\u6b65\u9aa4\u4e00" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u4e8c" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u4e09" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u56db" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n    </Steps>\n  )\n}'},120:{name:120,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nvar conStyle = {\n  minHeight: 200,\n  backgroundColor: \'#fafafa\',\n  textAlign: \'center\',\n  borderRadius: 6,\n  paddingTop: 80,\n  marginTop: 15\n};\nvar steps = [{\n  title: \'\u7b2c\u4e00\u6b65\',\n  content: \'\u6ce8\u518c\u4e00\u4e2a\u8d26\u53f7\'\n}, {\n  title: \'\u7b2c\u4e8c\u6b65\',\n  content: \'\u586b\u5199\u4e2a\u4eba\u4fe1\u606f\u3002\'\n}, {\n  title: \'\u7b2c\u4e09\u6b65\',\n  content: \'\u9a8c\u8bc1\u90ae\u7bb1\'\n}];\nreturn function Demo() {\n  var _React$useState = _react["default"].useState(0),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    current = _React$useState2[0],\n    setCurrent = _React$useState2[1];\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Steps, {\n    current: current\n  }, steps.map(function (item) {\n    return /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n      key: item.title,\n      title: item.title\n    });\n  })), /*#__PURE__*/_react["default"].createElement("div", {\n    style: conStyle\n  }, steps[current].content), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      marginTop: 20\n    }\n  }, current < steps.length - 1 && /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary",\n    size: "small",\n    onClick: function onClick() {\n      return setCurrent(current + 1);\n    }\n  }, "\\u4E0B\\u4E00\\u6B65"), current === steps.length - 1 && /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary",\n    size: "small",\n    onClick: function onClick() {\n      return _uiw.Notify.open({\n        description: \'\u5904\u7406\u5b8c\u6210!\'\n      });\n    }\n  }, "\\u5B8C\\u6210"), current > 0 && /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    size: "small",\n    style: {\n      marginLeft: 8\n    },\n    onClick: function onClick() {\n      return setCurrent(current - 1);\n    }\n  }, "\\u4E0A\\u4E00\\u6B65")));\n};',language:"jsx",value:"import React from 'react';\nimport { Steps, Button, Notify } from 'uiw';\n\nconst conStyle = { minHeight: 200, backgroundColor: '#fafafa',textAlign: 'center', borderRadius: 6, paddingTop: 80, marginTop: 15 }\nconst steps = [\n  {\n    title: '\u7b2c\u4e00\u6b65',\n    content: '\u6ce8\u518c\u4e00\u4e2a\u8d26\u53f7',\n  }, {\n    title: '\u7b2c\u4e8c\u6b65',\n    content: '\u586b\u5199\u4e2a\u4eba\u4fe1\u606f\u3002',\n  }, {\n    title: '\u7b2c\u4e09\u6b65',\n    content: '\u9a8c\u8bc1\u90ae\u7bb1',\n  }\n]\n\nexport default function Demo() {\n  const [current, setCurrent] = React.useState(0);\n    return (\n      <div>\n        <Steps current={current}>\n          {steps.map(item => <Steps.Step key={item.title} title={item.title} />)}\n        </Steps>\n        <div style={conStyle}>{steps[current].content}</div>\n        <div style={{marginTop: 20}}>\n          {current < steps.length - 1 && (\n            <Button type=\"primary\" size=\"small\" onClick={() => setCurrent(current + 1)}>\u4e0b\u4e00\u6b65</Button>\n          )}\n          {current === steps.length - 1 && (\n            <Button type=\"primary\" size=\"small\" onClick={() => Notify.open({ description: '\u5904\u7406\u5b8c\u6210!' })}>\u5b8c\u6210</Button>\n          )}\n          {current > 0 && (\n            <Button size=\"small\" style={{ marginLeft: 8 }} onClick={() => setCurrent(current - 1)}>\n              \u4e0a\u4e00\u6b65\n            </Button>\n          )}\n        </div>\n      </div>\n    );\n}"},168:{name:168,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n    gutter: 20\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, /*#__PURE__*/_react["default"].createElement(_uiw.Steps, {\n    current: 1,\n    direction: "vertical",\n    style: {\n      padding: \'20px 0\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u5DF2\\u5B8C\\u6210",\n    description: "\\u8FD9\\u91CC\\u662F\\u8BE5\\u6B65\\u9AA4\\u7684\\u63CF\\u8FF0\\u4FE1\\u606F"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u8FDB\\u884C\\u4E2D",\n    description: "\\u8FD9\\u91CC\\u662F\\u8BE5\\u6B65\\u9AA4\\u7684\\u63CF\\u8FF0\\u4FE1\\u606F"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    status: "error",\n    title: "\\u5F85\\u8FDB\\u884C",\n    description: "\\u8FD9\\u91CC\\u662F\\u8BE5\\u6B65\\u9AA4\\u7684\\u63CF\\u8FF0\\u4FE1\\u606F"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u5F85\\u8FDB\\u884C",\n    description: "\\u8FD9\\u91CC\\u662F\\u8BE5\\u6B65\\u9AA4\\u7684\\u63CF\\u8FF0\\u4FE1\\u606F"\n  }))), /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, /*#__PURE__*/_react["default"].createElement(_uiw.Steps, {\n    direction: "vertical",\n    progressDot: true,\n    status: "error",\n    current: 2,\n    style: {\n      padding: \'20px 0\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E00",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E8C",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    title: "\\u6B65\\u9AA4\\u4E09",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Steps.Step, {\n    icon: /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n      type: "user"\n    }),\n    title: "\\u6B65\\u9AA4\\u56DB",\n    description: "\\u8FD9\\u91CC\\u662F\\u6B65\\u9AA4\\u4E00\\u7684\\u8BF4\\u660E\\uFF0C\\u53EF\\u4EE5\\u5F88\\u957F\\u5F88\\u957F\\u54E6\\u3002"\n  }))));\n};',language:"jsx",value:'import React from \'react\';\nimport { Steps, Row, Col, Icon } from \'uiw\';\n\nexport default function Demo() {\n  return (\n    <Row gutter={20}>\n      <Col>\n        <Steps current={1} direction="vertical" style={{ padding: \'20px 0\' }}>\n          <Steps.Step title="\u5df2\u5b8c\u6210" description="\u8fd9\u91cc\u662f\u8be5\u6b65\u9aa4\u7684\u63cf\u8ff0\u4fe1\u606f" />\n          <Steps.Step title="\u8fdb\u884c\u4e2d" description="\u8fd9\u91cc\u662f\u8be5\u6b65\u9aa4\u7684\u63cf\u8ff0\u4fe1\u606f" />\n          <Steps.Step status="error" title="\u5f85\u8fdb\u884c" description="\u8fd9\u91cc\u662f\u8be5\u6b65\u9aa4\u7684\u63cf\u8ff0\u4fe1\u606f" />\n          <Steps.Step title="\u5f85\u8fdb\u884c" description="\u8fd9\u91cc\u662f\u8be5\u6b65\u9aa4\u7684\u63cf\u8ff0\u4fe1\u606f" />\n        </Steps>\n      </Col>\n      <Col>\n        <Steps direction="vertical" progressDot status="error" current={2} style={{ padding: \'20px 0\' }}>\n          <Steps.Step title="\u6b65\u9aa4\u4e00" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n          <Steps.Step title="\u6b65\u9aa4\u4e8c" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n          <Steps.Step title="\u6b65\u9aa4\u4e09" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n          <Steps.Step icon={<Icon type="user"/>} title="\u6b65\u9aa4\u56db" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n        </Steps>\n      </Col>\n    </Row>\n  )\n}'}},source:'Steps \u6b65\u9aa4\u6761\n===\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-steps/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-steps.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-steps)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-steps.svg?label=@uiw/react-steps)](https://npmjs.com/@uiw/react-steps)\n\n\u5f15\u5bfc\u7528\u6237\u6309\u7167\u6d41\u7a0b\u5b8c\u6210\u4efb\u52a1\u7684\u5bfc\u822a\u6761\u3002\u5f53\u4efb\u52a1\u590d\u6742\u6216\u8005\u5b58\u5728\u5148\u540e\u5173\u7cfb\u65f6\uff0c\u5c06\u5176\u5206\u89e3\u6210\u4e00\u7cfb\u5217\u6b65\u9aa4\uff0c\u4ece\u800c\u7b80\u5316\u4efb\u52a1\u3002\n\n```jsx\nimport { Steps } from \'uiw\';\n// or\nimport Steps from \'@uiw/react-steps\';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n\u7b80\u5355\u7684\u6b65\u9aa4\u6761\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Steps } from \'uiw\';\n\nexport default function Demo() {\n  return (\n    <Steps current={1} style={{ padding:"20px 0" }}>\n      <Steps.Step title="\u6b65\u9aa4\u4e00" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u4e8c" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u4e09" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u56db" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n    </Steps>\n  )\n}\n```\n\n### \u6ca1\u6709\u8be6\u60c5\u4ecb\u7ecd\n\n\u7b80\u5355\u7684\u6b65\u9aa4\u6761\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Steps } from \'uiw\';\n\nexport default function Demo() {\n  return (\n    <Steps current={1} style={{padding:"20px 0"}}>\n      <Steps.Step title="\u6b65\u9aa4\u4e00" />\n      <Steps.Step title="\u6b65\u9aa4\u4e8c" />\n      <Steps.Step title="\u6b65\u9aa4\u4e09" />\n      <Steps.Step title="\u6b65\u9aa4\u56db" />\n    </Steps>\n  )\n}\n```\n\n### \u5e26\u56fe\u6807\u7684\u6b65\u9aa4\u6761\n\n\u901a\u8fc7\u8bbe\u7f6e `Steps.Step` \u7684 `icon` \u5c5e\u6027\uff0c\u53ef\u4ee5\u542f\u7528\u81ea\u5b9a\u4e49\u56fe\u6807\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Steps, Icon } from \'uiw\';\n\nexport default function Demo() {\n  return (\n    <Steps current={1} style={{padding:"20px 0"}}>\n      <Steps.Step icon={<Icon type="user"/>} title="\u6ce8\u518c" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step icon={<Icon type="picasa" spin={true} color="red" />} title="\u4e0a\u4f20\u5934\u50cf" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step icon="message" title="\u9a8c\u8bc1\u90ae\u7bb1" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n    </Steps>\n  )\n}\n```\n\n### \u6b65\u9aa4\u8fd0\u884c\u9519\u8bef\n\n\u4f7f\u7528 `Steps` \u7684 `status` \u5c5e\u6027\u6765\u6307\u5b9a\u5f53\u524d\u6b65\u9aa4\u7684\u72b6\u6001\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Steps } from \'uiw\';\n\nexport default function Demo() {\n  return (\n    <Steps current={2} status="error" style={{padding:"20px 0"}}>\n      <Steps.Step title="\u6b65\u9aa4\u4e00" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u4e8c" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u4e09" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u56db" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n    </Steps>\n  )\n}\n```\n\n### \u70b9\u72b6\u6b65\u9aa4\u6761\n\n\u5305\u542b\u6b65\u9aa4\u70b9\u7684\u8fdb\u5ea6\u6761\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Steps } from \'uiw\';\n\nexport default function Demo() {\n  return (\n    <Steps progressDot status="error" current={2} style={{padding:"20px 0"}}>\n      <Steps.Step title="\u6b65\u9aa4\u4e00" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u4e8c" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u4e09" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n      <Steps.Step title="\u6b65\u9aa4\u56db" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n    </Steps>\n  )\n}\n```\n\n### \u6b65\u9aa4\u5207\u6362\n\n\u901a\u5e38\u914d\u5408\u5185\u5bb9\u53ca\u6309\u94ae\u4f7f\u7528\uff0c\u8868\u793a\u4e00\u4e2a\u6d41\u7a0b\u7684\u5904\u7406\u8fdb\u5ea6\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Steps, Button, Notify } from \'uiw\';\n\nconst conStyle = { minHeight: 200, backgroundColor: \'#fafafa\',textAlign: \'center\', borderRadius: 6, paddingTop: 80, marginTop: 15 }\nconst steps = [\n  {\n    title: \'\u7b2c\u4e00\u6b65\',\n    content: \'\u6ce8\u518c\u4e00\u4e2a\u8d26\u53f7\',\n  }, {\n    title: \'\u7b2c\u4e8c\u6b65\',\n    content: \'\u586b\u5199\u4e2a\u4eba\u4fe1\u606f\u3002\',\n  }, {\n    title: \'\u7b2c\u4e09\u6b65\',\n    content: \'\u9a8c\u8bc1\u90ae\u7bb1\',\n  }\n]\n\nexport default function Demo() {\n  const [current, setCurrent] = React.useState(0);\n    return (\n      <div>\n        <Steps current={current}>\n          {steps.map(item => <Steps.Step key={item.title} title={item.title} />)}\n        </Steps>\n        <div style={conStyle}>{steps[current].content}</div>\n        <div style={{marginTop: 20}}>\n          {current < steps.length - 1 && (\n            <Button type="primary" size="small" onClick={() => setCurrent(current + 1)}>\u4e0b\u4e00\u6b65</Button>\n          )}\n          {current === steps.length - 1 && (\n            <Button type="primary" size="small" onClick={() => Notify.open({ description: \'\u5904\u7406\u5b8c\u6210!\' })}>\u5b8c\u6210</Button>\n          )}\n          {current > 0 && (\n            <Button size="small" style={{ marginLeft: 8 }} onClick={() => setCurrent(current - 1)}>\n              \u4e0a\u4e00\u6b65\n            </Button>\n          )}\n        </div>\n      </div>\n    );\n}\n```\n\n### \u7ad6\u76f4\u65b9\u5411\u7684\u6b65\u9aa4\u6761\n\n\u7b80\u5355\u7684\u7ad6\u76f4\u65b9\u5411\u7684\u6b65\u9aa4\u6761\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Steps, Row, Col, Icon } from \'uiw\';\n\nexport default function Demo() {\n  return (\n    <Row gutter={20}>\n      <Col>\n        <Steps current={1} direction="vertical" style={{ padding: \'20px 0\' }}>\n          <Steps.Step title="\u5df2\u5b8c\u6210" description="\u8fd9\u91cc\u662f\u8be5\u6b65\u9aa4\u7684\u63cf\u8ff0\u4fe1\u606f" />\n          <Steps.Step title="\u8fdb\u884c\u4e2d" description="\u8fd9\u91cc\u662f\u8be5\u6b65\u9aa4\u7684\u63cf\u8ff0\u4fe1\u606f" />\n          <Steps.Step status="error" title="\u5f85\u8fdb\u884c" description="\u8fd9\u91cc\u662f\u8be5\u6b65\u9aa4\u7684\u63cf\u8ff0\u4fe1\u606f" />\n          <Steps.Step title="\u5f85\u8fdb\u884c" description="\u8fd9\u91cc\u662f\u8be5\u6b65\u9aa4\u7684\u63cf\u8ff0\u4fe1\u606f" />\n        </Steps>\n      </Col>\n      <Col>\n        <Steps direction="vertical" progressDot status="error" current={2} style={{ padding: \'20px 0\' }}>\n          <Steps.Step title="\u6b65\u9aa4\u4e00" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n          <Steps.Step title="\u6b65\u9aa4\u4e8c" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n          <Steps.Step title="\u6b65\u9aa4\u4e09" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n          <Steps.Step icon={<Icon type="user"/>} title="\u6b65\u9aa4\u56db" description="\u8fd9\u91cc\u662f\u6b65\u9aa4\u4e00\u7684\u8bf4\u660e\uff0c\u53ef\u4ee5\u5f88\u957f\u5f88\u957f\u54e6\u3002" />\n        </Steps>\n      </Col>\n    </Row>\n  )\n}\n```\n\n## Props\n\n### Steps\n\n| \u53c2\u6570      | \u8bf4\u660e    | \u7c7b\u578b      |  \u9ed8\u8ba4\u503c   |\n|--------- |-------- |---------- |-------- |\n| current | \u6307\u5b9a\u5f53\u524d\u6b65\u9aa4\uff0c\u4ece `0` \u5f00\u59cb\u8bb0\u6570\u3002| Number | `0` |\n| status | \u5f53\u524d\u6b65\u9aa4\u7684\u72b6\u6001\uff0c\u53ef\u9009\u503c\u4e3a`wait`\u3001`process`\u3001`finish`\u3001`error` | String | `process` |\n| direction | \u6307\u5b9a\u6b65\u9aa4\u6761\u65b9\u5411\uff0c\u652f\u6301\u6c34\u5e73`vertical`\u3001`horizontal` |  | `horizontal` |\n| progressDot | \u70b9\u72b6\u6b65\u9aa4\u6761|  | `horizontal` |\n\n### Steps.Step\n\n| \u53c2\u6570      | \u8bf4\u660e    | \u7c7b\u578b      |  \u9ed8\u8ba4\u503c   |\n|--------- |-------- |---------- |-------- |\n| status | \u6307\u5b9a\u72b6\u6001\u3002\u5f53\u4e0d\u914d\u7f6e\u8be5\u5c5e\u6027\u65f6\uff0c\u4f1a\u4f7f\u7528 Steps \u7684 current \u6765\u81ea\u52a8\u6307\u5b9a\u72b6\u6001\u3002\u53ef\u9009\uff1a`wait` `process` `finish` `error` | String | `wait` |\n| title | \u6307\u5b9a\u6bcf\u4e2a\u6b65\u9aa4\u6807\u9898 | String/ReactNode | - |\n| description | \u6b65\u9aa4\u7684\u8be6\u60c5\u63cf\u8ff0\uff0c\u53ef\u9009 | String/ReactNode | - |\n| icon | \u6b65\u9aa4\u7684\u56fe\u6807\uff0c\u5b57\u7b26\u4e32\u7c7b\u578b\u4ece`<Icon/>`\u7ec4\u4ef6\u4e2d\u627e\uff0c\u53ef\u9009 | String/ReactNode | - |\n',headings:[],headingsList:[]};var u=n(5301),i=n(4760);function a(){return(0,i.jsx)(u.Z,{...r,path:"https://github.com/uiwjs/uiw/tree/master/packages/react-steps/README.md"})}}}]);
//# sourceMappingURL=3864.fbb502dc.chunk.js.map