{"meta":"","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Step\">Step <a class=\"header-anchor scroll-count-item\" href=\"#Step\" data-scroll-id=\"Step\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>current</td>\n<td>Current step</td>\n<td>number</td>\n<td>0</td>\n<td></td>\n</tr>\n<tr>\n<td>shape</td>\n<td>Shape</td>\n<td>StepShape</td>\n<td>&apos;circle&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>direction</td>\n<td>Direction</td>\n<td>StepDirection</td>\n<td>&apos;hoz&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>labelPlacement</td>\n<td>Content arrangement in horizontal layout</td>\n<td>StepDirection</td>\n<td>&apos;ver&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>readOnly</td>\n<td>Read only mode</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>animation</td>\n<td>Enable animation</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>itemRender</td>\n<td>Custom node render function<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>index</em>: Node index<br><em>status</em>: Node status<br><em>title</em>: Node title&#xFF08;only for <code>shape=&apos;circle&apos;</code>&#xFF09;<br><em>content</em>: Node content&#xFF08;only for <code>shape=&apos;circle&apos;</code>&#xFF09;<br><strong>return</strong>:<br>Render content of the node</td>\n<td>(<br> index: number,<br> status: StepStatus,<br> title?: ReactNode,<br> content?: ReactNode<br> ) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>stretch</td>\n<td>Stretch the width</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Step Item\">Step.Item <a class=\"header-anchor scroll-count-item\" href=\"#Step Item\" data-scroll-id=\"Step Item\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>status</td>\n<td>The status of a step, if not passed, is generated based on the current attribute of the outer Step</td>\n<td>StepStatus</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>title</td>\n<td>Title</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>icon</td>\n<td>Icon</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>content</td>\n<td>Content for vertical content filling, invalid when shape is arrow</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>itemRender</td>\n<td>Custom node render function (it will overwirde Step&apos;s itemRender)<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>index</em>: Node index<br><em>status</em>: Node status<br><em>title</em>: Node title&#xFF08;only for <code>shape=&apos;circle&apos;</code>&#xFF09;<br><em>content</em>: Node content&#xFF08;only for <code>shape=&apos;circle&apos;</code>&#xFF09;<br><strong>return</strong>:<br>Render content of the node</td>\n<td>(<br> index: number,<br> status: StepStatus,<br> title?: React.ReactNode,<br> content?: React.ReactNode<br> ) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>percent</td>\n<td>Percent</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disabled</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>Callback when clicking on the step<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>index</em>: Node index</td>\n<td>(index: number) =&gt; unknown</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Step Direction\">StepDirection <a class=\"header-anchor scroll-count-item\" href=\"#Step Direction\" data-scroll-id=\"Step Direction\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">StepDirection</span> <span class=\"token operator\">=</span> <span class=\"token string\">&apos;hoz&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;ver&apos;</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h3 id=\"Step Status\">StepStatus <a class=\"header-anchor scroll-count-item\" href=\"#Step Status\" data-scroll-id=\"Step Status\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">StepStatus</span> <span class=\"token operator\">=</span> <span class=\"token string\">&apos;wait&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;process&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;finish&apos;</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h3 id=\"Step Shape\">StepShape <a class=\"header-anchor scroll-count-item\" href=\"#Step Shape\" data-scroll-id=\"Step Shape\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">StepShape</span> <span class=\"token operator\">=</span> <span class=\"token string\">&apos;circle&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;arrow&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;dot&apos;</span><span class=\"token punctuation\">;</span>\n</code></pre>\n"}