{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<h2 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></h2>\n<p>The Drawer is used to provide the user with an auxiliary window for quickly performing a simple operation, confirming user information, or providing a feedback prompt without leaving the main path.</p>\n<h3 id=\"V 2 Update\"><code>v2</code> update <a class=\"header-anchor scroll-count-item\" href=\"#V 2 Update\" data-scroll-id=\"V 2 Update\">#</a></h3>\n<p>version 1.25 add api <code>v2</code> to support open new version Dialog, feature as list:</p>\n<p>feature&#xFF1A;</p>\n<ul>\n<li>use css (not js) to compute position, will easier</li>\n<li>support <code>width/height</code> to fix width/height of drawer, or you can set <code>auto</code> to follow content width/height</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=\"Drawer\">Drawer <a class=\"header-anchor scroll-count-item\" href=\"#Drawer\" data-scroll-id=\"Drawer\">#</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>closeable</td>\n<td>[Deprecated] Control the way the drawer is closed</td>\n<td>&apos;close&apos; | &apos;mask&apos; | &apos;esc&apos; | boolean | &apos;close,mask&apos; | &apos;close,esc&apos; | &apos;mask,esc&apos;</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>closeMode</td>\n<td>Control the way the dialog is closed</td>\n<td>CloseMode | CloseMode[]</td>\n<td>-</td>\n<td></td>\n<td>1.21</td>\n</tr>\n<tr>\n<td>cache</td>\n<td>Whether to retain the child node when hiding</td>\n<td>boolean</td>\n<td>-</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<td>-</td>\n</tr>\n<tr>\n<td>bodyStyle</td>\n<td>Style on body</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>headerStyle</td>\n<td>Style on header</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>animation</td>\n<td>Animation playback method when showing and hiding<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>animation</em>: animation</td>\n<td>{ in: string; out: string } | false</td>\n<td>{ in: &apos;expandInDown&apos;, out: &apos;expandOutUp&apos; }</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Whether to show</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>width</td>\n<td>Width, only effective when placement is left right</td>\n<td>number | string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>height</td>\n<td>Height, only effective when placement is the top bottom</td>\n<td>number | string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>Callback when the dialog is closed</td>\n<td>(reason: string, e: React.MouseEvent | KeyboardEvent) =&gt; void</td>\n<td><code>() =&gt; {}</code></td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>placement</td>\n<td>The position of the page</td>\n<td>&apos;top&apos; | &apos;right&apos; | &apos;bottom&apos; | &apos;left&apos;</td>\n<td>&apos;right&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>v2</td>\n<td>Enable v2 version</td>\n<td>false | undefined</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>content</td>\n<td>Content</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>Render component container</td>\n<td>string | HTMLElement | null</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasMask</td>\n<td>Whether there is a mask</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>afterOpen</td>\n<td>Callback after the dialog is opened</td>\n<td>() =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>[v2 Deprecated] Controlled mode (without trigger), only triggered when closed, equivalent to onClose</td>\n<td>(visible: boolean, reason: string, e?: React.MouseEvent) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Drawer V 2\">Drawer V2 <a class=\"header-anchor scroll-count-item\" href=\"#Drawer V 2\" data-scroll-id=\"Drawer V 2\">#</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>closeable</td>\n<td>[Deprecated] Control the way the drawer is closed</td>\n<td>&apos;close&apos; | &apos;mask&apos; | &apos;esc&apos; | boolean | &apos;close,mask&apos; | &apos;close,esc&apos; | &apos;mask,esc&apos;</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>closeMode</td>\n<td>Control the way the dialog is closed</td>\n<td>CloseMode | CloseMode[]</td>\n<td>-</td>\n<td></td>\n<td>1.21</td>\n</tr>\n<tr>\n<td>cache</td>\n<td>Whether to retain the child node when hiding</td>\n<td>boolean</td>\n<td>-</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<td>-</td>\n</tr>\n<tr>\n<td>bodyStyle</td>\n<td>Style on body</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>headerStyle</td>\n<td>Style on header</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>animation</td>\n<td>Animation playback method when showing and hiding<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>animation</em>: animation</td>\n<td>{ in: string; out: string } | false</td>\n<td>{ in: &apos;expandInDown&apos;, out: &apos;expandOutUp&apos; }</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Whether to show</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>width</td>\n<td>Width, only effective when placement is left right</td>\n<td>number | string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>height</td>\n<td>Height, only effective when placement is the top bottom</td>\n<td>number | string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>afterClose</td>\n<td>Callback after the dialog is closed</td>\n<td>() =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>Callback when the dialog is closed</td>\n<td>(reason: string, e: React.MouseEvent | KeyboardEvent) =&gt; void</td>\n<td><code>() =&gt; {}</code></td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>placement</td>\n<td>The position of the page</td>\n<td>&apos;top&apos; | &apos;right&apos; | &apos;bottom&apos; | &apos;left&apos;</td>\n<td>&apos;right&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>v2</td>\n<td>Enable v2 version</td>\n<td>true</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>content</td>\n<td>Content</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>Render component container</td>\n<td>string | HTMLElement | null</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasMask</td>\n<td>Whether there is a mask</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Close Mode\">CloseMode <a class=\"header-anchor scroll-count-item\" href=\"#Close Mode\" data-scroll-id=\"Close Mode\">#</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\">CloseMode</span> <span class=\"token operator\">=</span> <span class=\"token string\">&apos;close&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;mask&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;esc&apos;</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<!-- api-extra-start -->\n<h3 id=\"Drawer Show\">Drawer.show <a class=\"header-anchor scroll-count-item\" href=\"#Drawer Show\" data-scroll-id=\"Drawer Show\">#</a></h3>\n<p>The following only list common properties that config can pass, and other properties of the Dialog can also be passed in.</p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">Param</th>\n<th style=\"text-align:left\">Descripiton</th>\n<th style=\"text-align:left\">Type</th>\n<th style=\"text-align:left\">Default Value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">title</td>\n<td style=\"text-align:left\">title of drawer</td>\n<td style=\"text-align:left\">ReactNode</td>\n<td style=\"text-align:left\">&apos;&apos;</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">content</td>\n<td style=\"text-align:left\">content of drawer</td>\n<td style=\"text-align:left\">ReactNode</td>\n<td style=\"text-align:left\">&apos;&apos;</td>\n</tr>\n</tbody>\n</table>\n<!-- api-extra-end -->\n<h2 id=\"ARIA And Keyboard\">ARIA and Keyboard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Keyboard\" data-scroll-id=\"ARIA And Keyboard\">#</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\">esc</td>\n<td style=\"text-align:left\">pressing ESC will close dialog</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">tab</td>\n<td style=\"text-align:left\">focus on any element that can be focused, the focus remains in the dialog when the dialog is displayed</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">shift+tab</td>\n<td style=\"text-align:left\">back focus on any element that can be focused, the focus remains in the dialog when the dialog is displayed</td>\n</tr>\n</tbody>\n</table>\n"}