{"meta":"<h2 id=\"Develop Guide\">Develop Guide <a class=\"header-anchor scroll-count-item\" href=\"#Develop Guide\" data-scroll-id=\"Develop Guide\">#</a></h2>\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<p>You can storage operation command with dropdown component when there are too much command. There will be a drop-down menu after you click or hover the trigger element. Then choose a command and run it.</p>\n<h3 id=\"Note\">Note <a class=\"header-anchor scroll-count-item\" href=\"#Note\" data-scroll-id=\"Note\">#</a></h3>\n<ul>\n<li>Dropdown is accessible when using like <code>&lt;Dropdown triggerType={[&quot;click&quot;, &quot;hover&quot;]}&gt;</code> (triggerType=&quot;focus&quot; is deprecated). In our opinion, menu elements need to be confirmed by users before they are expanded when it comes to accessibility.</li>\n</ul>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Dropdown\">Dropdown <a class=\"header-anchor scroll-count-item\" href=\"#Dropdown\" data-scroll-id=\"Dropdown\">#</a></h3>\n<p>&#x7EE7;&#x627F; Popup &#x7EDD;&#x5927;&#x591A;&#x6570;&#x5C5E;&#x6027;&#xFF0C;&#x9664;&#x4E86; canCloseByOutSideClick, autoFocus&#xFF0C;&#x4EE5;&#x4E0B;&#x5217;&#x4E3E;&#x4E3A;&#x5E38;&#x7528;&#x5C5E;&#x6027;&#xFF0C;&#x5176;&#x4ED6;&#x53EF;&#x53C2;&#x8003; Overlay &#x6587;&#x6863;</p>\n<p>Inherit most properties from Popup, except canCloseByOutSideClick, autoFocus, the following are common properties, other properties can refer to Overlay documentation</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>autoClose</td>\n<td>If set true, the popup will be closed when the child is clicked no matter whether it is a Menu (2.x default is true)</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Content in Dropdown</td>\n<td>React.ReactElement</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Overlay display or not now</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>align</td>\n<td>Overlay position relative to trigger element, see details Overlay align</td>\n<td>string</td>\n<td>&apos;tl bl&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>offset</td>\n<td>Extra adjustment for trigger element.</td>\n<td>Array&lt;number&gt;</td>\n<td>[0, 0]</td>\n<td></td>\n</tr>\n<tr>\n<td>hasMask</td>\n<td>Display mask or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>animation</td>\n<td>Animation play mode, support object value: { in: &apos;enter-class&apos;, out: &apos;leave</td>\n<td>string | false | Record&lt;&apos;in&apos; | &apos;out&apos;, string&gt;</td>\n<td>{ in: &apos;expandInDown&apos;, out: &apos;expandOutUp&apos; }</td>\n<td></td>\n</tr>\n<tr>\n<td>trigger</td>\n<td>Trigger element</td>\n<td>React.ReactElement</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n<tr>\n<td>triggerType</td>\n<td>Operation type of trigger overlay toggle visible, eg &apos;hover&apos;, &apos;click&apos;</td>\n<td>PopupProps[&apos;triggerType&apos;]</td>\n<td>&apos;hover&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisible</td>\n<td>Overlay display or not in default situation</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>Callback function when toggle visible of overlay</td>\n<td>PopupProps[&apos;onVisibleChange&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Overlay can not toggle visible if you set disabled attribute</td>\n<td>PopupProps[&apos;disabled&apos;]</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>delay</td>\n<td>Delay time of toggle overlay visible(unit: ms)&#xFF0C;if triggerType value is &apos;hover&apos;, delay time will work</td>\n<td>PopupProps[&apos;delay&apos;]</td>\n<td>200</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\">Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">Up Arrow</td>\n<td style=\"text-align:left\">in vertical mode, at the same level navigation, navigate to previous item</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Down Arrow</td>\n<td style=\"text-align:left\">in vertical mode, at the same level navigation, navigate to next item</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Right Arrow</td>\n<td style=\"text-align:left\">in vertical mode, open the submenu, navigate to the first item of the submenu; in horizontal mode, navigate at the same level, navigate to the next one</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Left Arrow</td>\n<td style=\"text-align:left\">in vertical mode, close the submenu, navigate to the parent menu; in horizontal mode, navigate at the same level, navigate to the previous one</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Enter</td>\n<td style=\"text-align:left\">open submenu and navigate to the first item of the submenu</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Esc</td>\n<td style=\"text-align:left\">close submenu and navigate to the parent menu item</td>\n</tr>\n</tbody>\n</table>\n"}