{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<p>Tabs mke it easy to explore and switch betweeen different views or functional aspects of an app or to browse categories data sets.</p>\n<h3 id=\"Animation\">Animation <a class=\"header-anchor scroll-count-item\" href=\"#Animation\" data-scroll-id=\"Animation\">#</a></h3>\n<p>Disable animation with <code>animation={false}</code></p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Tab\">Tab <a class=\"header-anchor scroll-count-item\" href=\"#Tab\" data-scroll-id=\"Tab\">#</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>activeKey</td>\n<td>Key of the current active tab. This prop will make tab a &apos;controlled component&apos;, end user will be unable to change tabs.</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultActiveKey</td>\n<td>Key of default active tab.</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>shape</td>\n<td>Shape of tab.</td>\n<td>&apos;pure&apos; | &apos;wrapped&apos; | &apos;text&apos; | &apos;capsule&apos;</td>\n<td>&apos;pure&apos;</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>excessMode</td>\n<td>Excess mode for extra tabs.</td>\n<td>&apos;slide&apos; | &apos;dropdown&apos;</td>\n<td>&apos;slide&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>tabPosition</td>\n<td>Position of tabs. Only effective when shape is &apos;wrapped&apos;.</td>\n<td>&apos;top&apos; | &apos;bottom&apos; | &apos;left&apos; | &apos;right&apos;</td>\n<td>&apos;top&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>size</td>\n<td>Size of the tabs</td>\n<td>&apos;small&apos; | &apos;medium&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>triggerType</td>\n<td>Trigger type to change active tab.</td>\n<td>&apos;hover&apos; | &apos;click&apos;</td>\n<td>&apos;click&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>lazyLoad</td>\n<td>Lazy mount tabs.</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>unmountInactiveTabs</td>\n<td>Auto unmount inactive tabs</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>navStyle</td>\n<td>Custom style of navigation.</td>\n<td>CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>navClassName</td>\n<td>Custom className of navigation.</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>contentStyle</td>\n<td>Custom style of content.</td>\n<td>CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>contentClassName</td>\n<td>Custom className of content.</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>extra</td>\n<td>Extra content of tab, ensure the item won&apos;t excess when using this.</td>\n<td>ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disableKeyboard</td>\n<td>Set and you cant switch tabs via keyboard arrow keys.</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>Callback when active tab changes.</td>\n<td>(key: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback triggered when a tab is changed.<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>key</em>: The active key</td>\n<td>(key: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>Callback triggered when a tab is closed.<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>key</em>: The closed key</td>\n<td>(key: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>tabRender</td>\n<td>Custom template render for tab.<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>key</em>: Key of TabItem<br><em>props</em>: Props of TabItem<br><strong>return</strong>:<br>The rendered tab item.</td>\n<td>(key: string, props: Record&lt;string, unknown&gt;) =&gt; ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>Properties pass down to Popup Menu in dropdown excess mode.</td>\n<td>ComponentPropsWithRef&lt;typeof Popup&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>icons</td>\n<td>Customize icons used in tab navigation.</td>\n<td>{<br> dropdown?: string | ReactNode;<br> prev?: string | ReactNode;<br> next?: string | ReactNode;<br> }</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>showAdd</td>\n<td>Show &apos;Add&apos; button.</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onAdd</td>\n<td>Callback triggered when clicking &apos;Add&apos; button to add a new tab.</td>\n<td>() =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>addIcon</td>\n<td>Custom &apos;Add&apos; button.</td>\n<td>ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Tab Item\">Tab.Item <a class=\"header-anchor scroll-count-item\" href=\"#Tab Item\" data-scroll-id=\"Tab 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>title</td>\n<td>Title of tab.</td>\n<td>ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>closeable</td>\n<td>If tab is closeable.</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>If tab is disabled.</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>style</td>\n<td>Style of tab in navigation.</td>\n<td>CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>ClassName of tab in navigation.</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>Callback when tab in navigation is clicked.</td>\n<td>(key: string, e: React.MouseEvent&lt;HTMLElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onMouseEnter</td>\n<td>Callback when mouse enter tab in navigation.</td>\n<td>(key: string, e: React.MouseEvent&lt;HTMLElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onMouseLeave</td>\n<td>Callback when mouse leave tab in navigation.</td>\n<td>(key: string, e: React.MouseEvent&lt;HTMLElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Child elements.</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"ARIA And Key Board\">ARIA and KeyBoard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Key Board\" data-scroll-id=\"ARIA And Key Board\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">KeyBoard</th>\n<th style=\"text-align:left\">Descripiton</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">Right Arrow</td>\n<td style=\"text-align:left\">switch to previous Tab.Item</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Left Arrow</td>\n<td style=\"text-align:left\">switch to next Tab.Item</td>\n</tr>\n</tbody>\n</table>\n"}