{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<p>Tags are used to mark something for its atrribute, or to classify things</p>\n<h3 id=\"When To Use\">When to use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<ul>\n<li>mark something</li>\n<li>classification</li>\n</ul>\n<h3 id=\"Attention\">Attention <a class=\"header-anchor scroll-count-item\" href=\"#Attention\" data-scroll-id=\"Attention\">#</a></h3>\n<ol>\n<li>the attribute <code>size</code> can be set to <code>large</code>, but for compatible with form situation, <code>size</code> = <code>large</code> is actually equal to <code>size</code> = <code>medium</code>,</li>\n<li>it is not recommanded to use large text inside Tag;</li>\n</ol>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Tag\">Tag <a class=\"header-anchor scroll-count-item\" href=\"#Tag\" data-scroll-id=\"Tag\">#</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<th>Supported Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>type</td>\n<td>Type of tag</td>\n<td>&apos;normal&apos; | &apos;primary&apos;</td>\n<td>&apos;normal&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>size</td>\n<td>The size of the tag</td>\n<td>&apos;small&apos; | &apos;medium&apos; | &apos;large&apos;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>color</td>\n<td>Tag color, currently supports: blue, green, orange, red, turquoise, yellow, and hex color values</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>1.19.0</td>\n</tr>\n<tr>\n<td>animation</td>\n<td>Enable animation or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>afterAppear</td>\n<td>Callback after the animation of the tag appears</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>Callback when it is clicked</td>\n<td>(<br> event: React.MouseEvent&lt;HTMLDivElement&gt; | React.KeyboardEvent&lt;HTMLDivElement&gt;<br> ) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Tag Closeable\">Tag.Closeable <a class=\"header-anchor scroll-count-item\" href=\"#Tag Closeable\" data-scroll-id=\"Tag Closeable\">#</a></h3>\n<p>Extends all props of <code>Tag</code></p>\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>closeArea</td>\n<td>The area which triggers onClose event for closeable tag</td>\n<td>CloseArea</td>\n<td>&apos;tail&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>Callback when closeArea is clicked<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>from</em>: Clicked place<br><strong>return</strong>:<br>True to close tag, false to prevent the close action</td>\n<td>(from: CloseArea, node?: HTMLElement | null) =&gt; boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>afterClose</td>\n<td>Callback when tag has been closed</td>\n<td>(node: HTMLElement | null) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Tag Selectable\">Tag.Selectable <a class=\"header-anchor scroll-count-item\" href=\"#Tag Selectable\" data-scroll-id=\"Tag Selectable\">#</a></h3>\n<p>Extends all props of <code>Tag</code></p>\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>checked</td>\n<td>Whether the tag is checked, controlled usage</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultChecked</td>\n<td>Whether the tag is checked by default, uncontrolled usage</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the checked state changes</td>\n<td>(<br> checked: boolean,<br> e: React.MouseEvent&lt;HTMLDivElement&gt; | React.KeyboardEvent&lt;HTMLDivElement&gt;<br> ) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Close Area\">CloseArea <a class=\"header-anchor scroll-count-item\" href=\"#Close Area\" data-scroll-id=\"Close Area\">#</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\">CloseArea</span> <span class=\"token operator\">=</span> <span class=\"token string\">&apos;tag&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;tail&apos;</span><span class=\"token punctuation\">;</span>\n</code></pre>\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\">SPACE</td>\n<td style=\"text-align:left\">Select,cancel or delete the current tag</td>\n</tr>\n</tbody>\n</table>\n"}