GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
18 Branches
643 Tags
234 MiB
 
 
Branch: gh-pages
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'gh-pages'
${ noResults }
ant-design/components/drawer-cn/index.html

686 lines
314 KiB
Raw Permalink Blame History

<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#1677ff">
<link rel="shortcut icon" href="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png">
<link rel="stylesheet" href="/ssr-1689742446534.css">
<link rel="stylesheet" href="/umi.c34b5f34.css">
<script>
(function () {
function isLocalStorageNameSupported() {
const testKey = 'test';
const storage = window.localStorage;
try {
storage.setItem(testKey, '1');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
const pathname = location.pathname;
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
const pathname = path.indexOf('/') === 0 ? path : '/' + path;
if (!zhCN) {
// to enUS
return /\/?index(-cn)?/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.indexOf('/') === pathname.length - 1) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
// 兼容旧的 URL， `?locale=...`
const queryString = location.search;
if (queryString) {
const isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig && !isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig);
}
}
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
const lang =
(window.localStorage && localStorage.getItem('locale')) ||
((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn'
? 'zh-CN'
: 'en-US');
// safari is 'zh-cn', while other browser is 'zh-CN';
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
}
}
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
})();
</script>
<script async="" src="//www.googletagmanager.com/gtag/js?id=UA-72788897-1"></script>
<script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-72788897-1');</script>
<title data-rh="true">抽屉 Drawer - Ant Design</title>
<meta data-rh="true" property="og:description" content="基于 Ant Design 设计体系的 React UI 组件库，用于研发企业级中后台产品。"/><meta data-rh="true" property="og:type" content="website"/><meta data-rh="true" property="og:image" content="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png"/><meta data-rh="true" property="og:title" content="抽屉 Drawer - Ant Design"/><meta data-rh="true" name="description" content="屏幕边缘滑出的浮层面板。"/>
<link data-rh="true" sizes="144x144" href="https://gw.alipayobjects.com/zos/antfincdn/UmVnt3t4T0/antd.png"/>
<style data-emotion="css-global 1ybv193">@font-face{font-weight:normal;font-family:AlibabaPuHuiTi;src:url('//at.alicdn.com/t/webfont_6e11e43nfj.woff2') format('woff2'),url('//at.alicdn.com/t/webfont_6e11e43nfj.woff') format('woff'),url('//at.alicdn.com/t/webfont_6e11e43nfj.ttf') format('truetype');font-display:swap;}@font-face{font-weight:bold;font-family:AlibabaPuHuiTi;src:url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),url('//at.alicdn.com/t/webfont_exesdog9toj.woff') format('woff'),url('//at.alicdn.com/t/webfont_exesdog9toj.ttf') format('truetype');font-display:swap;}@font-face{font-weight:900;font-family:'AliPuHui';src:url('//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2') format('woff2'),url('//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff') format('woff');font-display:swap;}html{direction:initial;}html.rtl{direction:rtl;}body{overflow-x:hidden;color:rgba(0, 0, 0, 0.88);font-size:14px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';line-height:1.5714285714285714;background:#ffffff;-webkit-transition:background-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);transition:background-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);}</style><style data-emotion="css-global 4rer99">body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;}ul,ol{list-style:none;}img{vertical-align:middle;border-style:none;}</style><style data-emotion="css-global 1osa5ve">.markdown{color:rgba(0, 0, 0, 0.88);font-size:14px;line-height:2;}.highlight{line-height:1.5;}.markdown img{max-width:calc(100% - 32px);max-height:100%;}.markdown p>img{margin:34px 0;box-shadow:0 8px 20px rgba(143, 168, 191, 0.35);}.markdown p>img.markdown-inline-image{margin:0;box-shadow:none;}.markdown h1{margin-top:8px;margin-bottom:20px;color:rgba(0, 0, 0, 0.88);font-weight:500;font-size:30px;font-family:Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif;line-height:38px;}.markdown h1 .subtitle{margin-left:12px;}.markdown h2{font-size:24px;line-height:32px;}.markdown h2,.markdown h3,.markdown h4,.markdown h5,.markdown h6{clear:both;margin:1.6em 0 0.6em;color:rgba(0, 0, 0, 0.88);font-weight:500;font-family:Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif;}.markdown h3{font-size:18px;}.markdown h4{font-size:16px;}.markdown h5{font-size:14px;}.markdown h6{font-size:12px;}.markdown hr{clear:both;height:1px;margin:24px 0;background:rgba(5, 5, 5, 0.06);border:0;}.markdown p,.markdown pre{margin:1em 0;}.ant-row-rtl .markdown p,.ant-row-rtl .markdown pre{direction:rtl;text-align:right;}.markdown ul>li{margin-left:20px;padding-left:4px;list-style-type:circle;}.rtl .markdown ul>li{margin-right:20px;margin-left:0;padding-right:4px;padding-left:0;}.markdown ul>li:empty{display:none;}.markdown ol>li{margin-left:20px;padding-left:4px;list-style-type:decimal;}.ant-row-rtl .markdown ol>li{margin-right:20px;margin-left:0;padding-right:4px;padding-left:0;}.markdown ul>li>p,.markdown ol>li>p{margin:0.2em 0;}.markdown code{margin:0 1px;padding:0.2em 0.4em;font-size:0.9em;background:rgba(0, 0, 0, 0.04);border:1px solid rgba(5, 5, 5, 0.06);border-radius:3px;}.markdown pre{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;background:rgba(0, 0, 0, 0.04);border-radius:6px;}.markdown pre code{margin:0;padding:0;overflow:auto;color:rgba(0, 0, 0, 0.88);font-size:13px;direction:ltr;text-align:left;background:#f5f5f5;border:none;}.markdown strong,.markdown b{font-weight:500;}.markdown .dumi-default-source-code{margin:1em 0;background-color:rgba(0, 0, 0, 0.04);border-radius:6px;}.markdown .dumi-default-source-code >pre.prism-code{padding:12px 20px;font-size:13px;line-height:2;}.pic-plus>*{display:inline-block!important;vertical-align:middle;}.pic-plus span{margin:0 20px;color:#aaa;font-size:30px;}.antd-site-snippet .ant-tabs-tab .snippet-label{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.antd-site-snippet .ant-tabs-tab .snippet-label svg{-webkit-margin-end:8px;margin-inline-end:8px;}.antd-site-snippet .dumi-default-source-code{margin:0 auto;background-color:rgba(0, 0, 0, 0.04);border-radius:6px;}.antd-site-snippet .dumi-default-source-code >pre.prism-code{padding:12px 20px;font-size:13px;line-height:2;}.markdown table td>a:not(:last-child){margin-right:0!important;}.markdown table td>a:not(:last-child)::after{position:relative!important;}.markdown blockquote{margin:1em 0;padding-left:0.8em;color:rgba(0, 0, 0, 0.65);font-size:90%;border-left:4px solid rgba(5, 5, 5, 0.06);}.rtl .markdown blockquote{padding-right:0.8em;padding-left:0;border-right:4px solid rgba(5, 5, 5, 0.06);border-left:none;}.markdown blockquote p{margin:0;}.markdown .anchor{margin-left:8px;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;}.rtl .markdown .anchor{margin-right:8px;margin-left:0;}.markdown .waiting{color:#ccc;cursor:not-allowed;}.markdown a.edit-button{display:inline-block;margin-left:8px;-webkit-text-decoration:none;text-decoration:none;}.rtl .markdown a.edit-button{margin-right:8px;margin-left:0;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg);}.markdown a.edit-button .anticon{display:block;color:rgba(0, 0, 0, 0.65);font-size:16px;-webkit-transition:all 0.3s;transition:all 0.3s;}.markdown a.edit-button .anticon:hover{color:rgba(0, 0, 0, 0.88);}.markdown h1:hover .anchor,.markdown h2:hover .anchor,.markdown h3:hover .anchor,.markdown h4:hover .anchor,.markdown h5:hover .anchor,.markdown h6:hover .anchor{display:inline-block;opacity:1;}.markdown>br,.markdown>p>br{clear:both;}.markdown .dumi-default-table table{margin:0;overflow-x:auto;overflow-y:hidden;direction:ltr;empty-cells:show;border:1px solid rgba(5, 5, 5, 0.06);border-collapse:collapse;border-spacing:0;}.markdown .dumi-default-table table th,.markdown .dumi-default-table table td{padding:12px 24px;text-align:left;border:1px solid rgba(5, 5, 5, 0.06);}.markdown .dumi-default-table table th:first-child,.markdown .dumi-default-table table td:first-child{border-left:1px solid rgba(5, 5, 5, 0.06);}.markdown .dumi-default-table table th:last-child,.markdown .dumi-default-table table td:last-child{border-right:1px solid rgba(5, 5, 5, 0.06);}.markdown .dumi-default-table table th img,.markdown .dumi-default-table table td img{max-width:unset;}.markdown .dumi-default-table table th{color:#5c6b77;font-weight:500;white-space:nowrap;background:rgba(0, 0, 0, 0.02);border-width:1px 1px 2px;}.markdown .dumi-default-table table tbody tr{-webkit-transition:all 0.3s;transition:all 0.3s;}.markdown .dumi-default-table table tbody tr:hover{background:rgba(60, 90, 100, 0.04);}.markdown .dumi-default-table table.component-api-table{margin:0;overflow-x:auto;overflow-y:hidden;font-size:13px;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;line-height:1.5714285714285714;border:1px solid rgba(5, 5, 5, 0.06);border-width:0 1px;}.markdown .dumi-default-table table.component-api-table th{border-width:1px 0 2px;}.markdown .dumi-default-table table.component-api-table td{border-width:1px 0;}.markdown .dumi-default-table table.component-api-table td:first-child{width:18%;min-width:58px;color:#595959;font-weight:600;white-space:nowrap;}.markdown .dumi-default-table table.component-api-table td:nth-child(2){width:55%;min-width:160px;}.markdown .dumi-default-table table.component-api-table td:nth-child(3){width:22%;color:#c41d7f;font-size:13px;}.markdown .dumi-default-table table.component-api-table td:nth-child(4){width:15%;font-size:13px;}.markdown .dumi-default-table table.component-api-table td:nth-child(5){width:8%;font-size:13px;}.markdown .dumi-default-table table.component-api-table td:nth-last-child(3):first-child{width:38%;}.markdown .dumi-default-table table.component-api-table td:nth-last-child(3):first-child~td:nth-last-child(2){width:70%;}.grid-demo .ant-row>div,[id^='components-grid-demo-'] .ant-row>div,.grid-demo .code-box-demo .ant-row>div,[id^='components-grid-demo-'] .code-box-demo .ant-row>div{min-height:30px;margin-top:8px;margin-bottom:8px;color:#fff;text-align:center;border-radius:0;}.grid-demo .code-box-demo .ant-row>div:not(.gutter-row),[id^='components-grid-demo-'] .code-box-demo .ant-row>div:not(.gutter-row){padding:16px 0;background:#1677ff;}.grid-demo .code-box-demo .ant-row>div:not(.gutter-row):nth-child(2n + 1),[id^='components-grid-demo-'] .code-box-demo .ant-row>div:not(.gutter-row):nth-child(2n + 1){background:#1677ffbf;}.grid-demo .ant-row .demo-col,[id^='components-grid-demo-'] .ant-row .demo-col,.grid-demo .code-box-demo .ant-row .demo-col,[id^='components-grid-demo-'] .code-box-demo .ant-row .demo-col{margin-top:0;margin-bottom:0;padding:30px 0;color:#fff;font-size:18px;text-align:center;border:none;}.grid-demo .ant-row .demo-col-1,[id^='components-grid-demo-'] .ant-row .demo-col-1{background:#1677ff;}.grid-demo .ant-row .demo-col-2,[id^='components-grid-demo-'] .ant-row .demo-col-2,.grid-demo .code-box-demo .ant-row .demo-col-2,[id^='components-grid-demo-'] .code-box-demo .ant-row .demo-col-2{background:#1677ff;}.grid-demo .ant-row .demo-col-3,[id^='components-grid-demo-'] .ant-row .demo-col-3,.grid-demo .code-box-demo .ant-row .demo-col-3,[id^='components-grid-demo-'] .code-box-demo .ant-row .demo-col-3{color:#999;background:rgba(255, 255, 255, 0.2);}.grid-demo .ant-row .demo-col-4,[id^='components-grid-demo-'] .ant-row .demo-col-4,.grid-demo .code-box-demo .ant-row .demo-col-4,[id^='components-grid-demo-'] .code-box-demo .ant-row .demo-col-4{background:#1677ff;}.grid-demo .ant-row .demo-col-5,[id^='components-grid-demo-'] .ant-row .demo-col-5,.grid-demo .code-box-demo .ant-row .demo-col-5,[id^='components-grid-demo-'] .code-box-demo .ant-row .demo-col-5{color:#999;background:rgba(255, 255, 255, 0.2);}.grid-demo .code-box-demo .height-100,[id^='components-grid-demo-'] .code-box-demo .height-100{height:100px;line-height:100px;}.grid-demo .code-box-demo .height-50,[id^='components-grid-demo-'] .code-box-demo .height-50{height:50px;line-height:50px;}.grid-demo .code-box-demo .height-120,[id^='components-grid-demo-'] .code-box-demo .height-120{height:120px;line-height:120px;}.grid-demo .code-box-demo .height-80,[id^='components-grid-demo-'] .code-box-demo .height-80{height:80px;line-height:80px;}[id='components-grid-demo-playground'] >.code-box-demo .ant-row>div,[id='components-grid-demo-gutter'] >.code-box-demo .ant-row>div{margin-top:0;margin-bottom:0;}</style><style data-emotion="css-global 13tmslw">pre code{display:block;padding:16px 32px;color:rgba(0, 0, 0, 0.88);font-size:14px;font-family:'Lucida Console',Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;line-height:2;white-space:pre;background:white;border:1px solid #e9e9e9;border-radius:6px;}code[class*='language-'],pre[class*='language-']{color:black;font-family:'Lucida Console',Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;line-height:1.5;direction:ltr;white-space:pre;text-align:left;word-wrap:normal;word-break:normal;word-spacing:normal;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;background:none;}code[class*='css']{direction:ltr;}pre[class*='language-'] ::selection,code[class*='language-'] ::selection{text-shadow:none;background:#b3d4fc;}@media print{code[class*='language-'],pre[class*='language-']{text-shadow:none;}}pre[class*='language-']{margin:16px 0;padding:12px 20px;overflow:auto;}:not(pre)>code[class*='language-'],pre[class*='language-']{background:#f5f5f5;}:not(pre)>code[class*='language-']{padding:0.1em;white-space:normal;border-radius:0.3em;}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray;}.token.punctuation{color:#999;}.namespace{opacity:0.7;}.markdown .token.property,.markdown .token.tag,.markdown .token.boolean,.markdown .token.number,.markdown .token.constant,.markdown .token.symbol,.markdown .token.deleted{color:#f81d22;}.markdown .token.selector,.markdown .token.attr-name,.markdown .token.string,.markdown .token.char,.markdown .token.builtin,.markdown .token.inserted{color:#0b8235;}.markdown .token.operator,.markdown .token.entity,.markdown .token.url,.markdown .language-css .token.string,.markdown .style .token.string{color:#0b8235;}.markdown .token.atrule,.markdown .token.attr-value,.markdown .token.keyword{color:#008dff;}.markdown .token.function{color:#f81d22;}.markdown .token.regex,.markdown .token.important,.markdown .token.variable{color:#e90;}.markdown .token.important,.markdown .token.bold{font-weight:bold;}.markdown .token.italic{font-style:italic;}.markdown .token.entity{cursor:help;}</style><style data-emotion="css-global 17kvlx7">.code-boxes-col-1-1{width:100%;}.code-boxes-col-2-1{display:inline-block;vertical-align:top;}.code-box{position:relative;display:inline-block;width:100%;margin:0 0 16px;background-color:#ffffff;border:1px solid rgba(5, 5, 5, 0.06);border-radius:6px;-webkit-transition:all 0.2s;transition:all 0.2s;}.code-box .code-box-title,.code-box .code-box-title a{color:rgba(0, 0, 0, 0.88)!important;background:#ffffff;}.code-box .code-box-demo{background-color:#ffffff;border-radius:6px 6px 0 0;}.code-box .markdown pre{margin:0.5em 0;padding:6px 12px;}.code-box .markdown pre code{margin:0;background:#f5f5f5;}.code-box:target{border:1px solid #1677ff;}.code-box-expand-trigger{position:relative;color:#3b4357;font-size:20px;cursor:pointer;opacity:0.75;-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-margin-start:12px;margin-inline-start:12px;}.code-box-expand-trigger:hover{opacity:1;}.code-box-title{position:absolute;top:-14px;padding:1px 8px;color:#777;background:#ffffff;border-radius:6px 6px 0 0;-webkit-transition:background-color 0.4s;transition:background-color 0.4s;-webkit-margin-start:16px;margin-inline-start:16px;}.ant-row-rtl .code-box-title{border-radius:6px 0 0 6px;}.code-box-title a,.code-box-title a:hover{color:rgba(0, 0, 0, 0.88);font-weight:500;font-size:14px;}.code-box-description{padding:18px 24px 12px;}.code-box a.edit-button{position:absolute;top:7px;right:-16px;font-size:12px;-webkit-text-decoration:none;text-decoration:none;background:inherit;-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9);-webkit-padding-end:6px;padding-inline-end:6px;}.code-box a.edit-button .anticon{color:rgba(0, 0, 0, 0.65);-webkit-transition:all 0.3s;transition:all 0.3s;}.code-box a.edit-button .anticon:hover{color:rgba(0, 0, 0, 0.88);}.ant-row.ant-row-rtl .code-box a.edit-button{right:auto;left:-22px;}.code-box-demo{padding:42px 24px 50px;color:rgba(0, 0, 0, 0.88);border-bottom:1px solid rgba(5, 5, 5, 0.06);}.code-box iframe{width:100%;border:0;}.code-box-meta.markdown{position:relative;width:100%;font-size:14px;border-radius:0 0 6px 6px;-webkit-transition:background-color 0.4s;transition:background-color 0.4s;}.code-box-meta blockquote{line-height:1.5;}.code-box-meta h4,section.code-box-meta p{margin:0;}.code-box-meta >p{width:100%;margin:0.5em 0;font-size:12px;word-break:break-word;-webkit-padding-end:25px;padding-inline-end:25px;}.code-box.expand .code-box-meta{border-bottom:1px dashed rgba(5, 5, 5, 0.06);border-radius:0;}.code-box .code-expand-icon{position:relative;width:16px;height:16px;cursor:pointer;}.code-box .code-expand-icon-show,.code-box .code-expand-icon-hide{position:absolute;top:0;left:0;width:100%;max-width:100%;margin:0;box-shadow:none;-webkit-transition:all 0.4s;transition:all 0.4s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.ant-row-rtl .code-box .code-expand-icon-show,.ant-row-rtl .code-box .code-expand-icon-hide{right:0;left:auto;}.code-box .code-expand-icon-show{opacity:0.55;pointer-events:auto;}.code-box .code-expand-icon-show:hover{opacity:1;}.code-box .code-expand-icon.ant-tooltip-open .code-expand-icon-show{opacity:1;}.code-box .code-expand-icon-hide{opacity:0;pointer-events:none;}.code-box .highlight-wrapper{display:none;overflow:auto;border-radius:0 0 6px 6px;}.code-box .highlight-wrapper-expand{display:block;}.code-box .highlight{position:relative;}.code-box .highlight pre{margin:0;padding:0;background:#ffffff;}.code-box .highlight:not(:first-child){border-top:1px dashed rgba(5, 5, 5, 0.06);}.code-box-actions{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:12px 0;border-top:1px dashed rgba(5, 5, 5, 0.06);opacity:0.7;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;}.code-box-actions:hover{opacity:1;}.code-box-actions .code-box-code-action{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:16px;height:16px;color:rgba(0, 0, 0, 0.65);cursor:pointer;-webkit-transition:all 0.24s;transition:all 0.24s;}.code-box-actions .code-box-code-action:hover{color:rgba(0, 0, 0, 0.88);}.code-box-actions .code-box-code-action .anticon{display:block;}.code-box-code-copy{width:14px;height:14px;font-size:14px;text-align:center;background:#ffffff;cursor:pointer;-webkit-transition:-webkit-transform 0.24s;transition:transform 0.24s;}.code-box-code-copy.anticon-check{color:#52c41a!important;font-weight:bold;}.code-box-codepen{width:14px;height:14px;overflow:hidden;border:0;cursor:pointer;}.code-box-riddle{width:14px;height:14px;overflow:hidden;border:0;cursor:pointer;}.code-box-codesandbox{width:16px;height:16px;overflow:hidden;border:0;cursor:pointer;}.code-box-codesandbox:hover{opacity:1;}.highlight-wrapper:hover .code-box-code-copy,.highlight-wrapper:hover .code-box-codepen,.highlight-wrapper:hover .code-box-codesandbox,.highlight-wrapper:hover .code-box-riddle{opacity:1;}.code-box pre{width:auto;margin:0;}.code-box pre code{background:#ffffff;border:none;box-shadow:unset;}.code-box-debug{border-color:#d3adf7;}.code-box-debug .code-box-title a{color:#722ed1;}.demo-wrapper{position:relative;}.all-code-box-controls{position:absolute;top:-32px;inset-inline-end:0;}.ant-row-rtl #components-tooltip-demo-placement .code-box-demo,.ant-row-rtl #components-popover-demo-placement .code-box-demo,.ant-row-rtl #components-popconfirm-demo-placement .code-box-demo{direction:ltr;}</style><style data-emotion="css-global hb0n9q">ul.anticons-list{margin:10px 0;overflow:hidden;direction:ltr;list-style:none;}ul.anticons-list li{position:relative;float:left;width:16.66%;height:100px;margin:3px 0;padding:10px 0 0;overflow:hidden;color:#555;text-align:center;list-style:none;background-color:inherit;border-radius:4px;cursor:pointer;-webkit-transition:color 0.3s ease-in-out,background-color 0.3s ease-in-out;transition:color 0.3s ease-in-out,background-color 0.3s ease-in-out;}.rtl ul.anticons-list li{margin:3px 0;padding:10px 0 0;}ul.anticons-list li .anticon{margin:12px 0 8px;font-size:36px;-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;will-change:transform;}ul.anticons-list li .anticon-class{display:block;font-family:'Lucida Console',Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;white-space:nowrap;text-align:center;-webkit-transform:scale(0.83);-moz-transform:scale(0.83);-ms-transform:scale(0.83);transform:scale(0.83);}ul.anticons-list li .anticon-class .ant-badge{-webkit-transition:color 0.3s ease-in-out;transition:color 0.3s ease-in-out;}ul.anticons-list li:hover{color:#fff;background-color:#1677ff;}ul.anticons-list li:hover .anticon{-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4);}ul.anticons-list li:hover .ant-badge{color:#fff;}ul.anticons-list li.TwoTone:hover{background-color:#8ecafe;}ul.anticons-list li.copied:hover{color:rgba(255, 255, 255, 0.2);}ul.anticons-list li::after{position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;line-height:110px;text-align:center;background:#1677ff;opacity:0;-webkit-transition:all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);transition:all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);content:'Copied!';}ul.anticons-list li.copied::after{opacity:1;}.copied-code{padding:2px 4px;font-size:12px;background:#f5f5f5;border-radius:2px;}</style><style data-emotion="css-global ir8pau">.icon-pic-searcher{display:inline-block;margin:0 8px;}.icon-pic-searcher .icon-pic-btn{color:rgba(0, 0, 0, 0.45);cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s;}.icon-pic-searcher .icon-pic-btn:hover{color:rgba(0, 0, 0, 0.88);}.icon-pic-preview{width:66px;height:66px;margin-top:10px;padding:8px;text-align:center;border:1px solid #d9d9d9;border-radius:4px;}.icon-pic-preview >img{max-width:50px;max-height:50px;}.icon-pic-search-result{min-height:50px;padding:0 10px;}.icon-pic-search-result >.result-tip{padding:10px 0;color:rgba(0, 0, 0, 0.65);}.icon-pic-search-result >table{width:100%;}.icon-pic-search-result >table .col-icon{width:80px;padding:10px 0;}.icon-pic-search-result >table .col-icon >.anticon{font-size:30px;}.icon-pic-search-result >table .col-icon >.anticon:hover{color:#69b1ff;}</style><style data-emotion="css-global 2xd41">.browser-mockup{position:relative;border-top:2em solid rgba(230, 230, 230, 0.7);border-radius:3px 3px 0 0;box-shadow:0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);}.browser-mockup::before{position:absolute;top:-1.25em;left:1em;display:block;width:0.5em;height:0.5em;background-color:#f44;border-radius:50%;box-shadow:0 0 0 2px #f44,1.5em 0 0 2px #9b3,3em 0 0 2px #fb5;content:'';}.browser-mockup.with-tab::after{position:absolute;top:-2em;left:5.5em;display:block;width:20%;height:0;border-right:0.8em solid transparent;border-bottom:2em solid white;border-left:0.8em solid transparent;content:'';}.browser-mockup.with-url::after{position:absolute;top:-1.6em;left:5.5em;display:block;width:calc(100% - 6em);height:1.2em;background-color:white;border-radius:2px;content:'';}.browser-mockup>*{display:block;}</style><style data-emotion="css-global oncf45">.nav-phone-icon{position:absolute;top:25px;right:30px;z-index:1;display:none;width:16px;height:22px;cursor:pointer;}@media only screen and (max-width: 992px){.code-boxes-col-2-1,.code-boxes-col-1-1{float:none;width:100%;max-width:unset;}}@media only screen and (max-width: 767.99px){.preview-image-boxes{float:none;width:100%;margin:0!important;}.preview-image-box{width:100%;margin:10px 0;padding:0;}.image-wrapper{display:none;}div.version{display:block;margin:29px auto 16px;}.toc{display:none;}.nav-phone-icon{display:block;}.main{height:calc(100% - 86px);}.aside-container{float:none;width:auto;padding-bottom:30px;border-right:0;}.ant-row-rtl{margin-right:0;margin-left:0;padding-right:16px;padding-left:16px;}.ant-row-rtl >.markdown>*{width:100%!important;}.main-wrapper{width:100%;margin:0;border-radius:0;}.prev-next-nav{width:calc(100% - 32px);margin-left:16px;}.ant-row-rtl .prev-next-nav{margin-right:16px;margin-left:64px;}.drawer .ant-menu-inline .ant-menu-item::after,.drawer .ant-menu-vertical .ant-menu-item::after{right:auto;left:0;}.home-page-wrapper .page h2{margin:80px auto 64px;}.home-page-wrapper .parallax-bg{display:none;}.banner{display:block;height:632px;}.banner-bg-wrapper{display:none;}.banner .img-wrapper,.banner .text-wrapper{display:inline-block;width:100%;min-width:unset;max-width:unset;margin:auto;text-align:center;}.banner .img-wrapper{position:initial;margin-top:20px;text-align:center;}.banner .img-wrapper svg{width:100%;max-width:260px;height:auto;margin:0 auto;}.banner .text-wrapper{min-height:200px;margin-top:32px;padding:0;}.banner .text-wrapper h1{display:none;}.banner .text-wrapper p{color:#314659;font-size:14px;line-height:28px;}.banner .text-wrapper .banner-btns{display:block;min-width:100%;white-space:nowrap;text-align:center;}.banner .text-wrapper .banner-btns .banner-btn{padding:0 20px;font-size:14px;}.banner .text-wrapper .banner-promote{min-width:100%;margin-top:32px;}.banner .text-wrapper .banner-promote .ant-divider{display:none;}.banner .text-wrapper .banner-promote a{font-size:14px;white-space:nowrap;}.banner .text-wrapper .banner-promote a img{width:20px;}.page1{min-height:1300px;}.page1 .ant-row{margin:24px auto 64px;}.page1 .ant-row >div{margin-bottom:48px;}.page2{min-height:840px;background:#ffffff;}.page2-content{box-shadow:none;}.page2-components{display:none;}.page2-product{min-height:auto;padding:0 16px;}.page2-product .product-block{margin-bottom:34px;padding-bottom:35px;border-bottom:1px solid rgba(5, 5, 5, 0.06);}.page2-product .product-block:last-child{margin-bottom:32px;border-bottom:none;}.page2-product .product-block:last-child .block-text-wrapper{height:auto;}.page2-product .product-block .block-image-wrapper{height:88px;}.page2-product .product-block .block-image-wrapper img{height:100%;}.page2-product .product-block .block-text-wrapper{padding-bottom:0;border-bottom:none;}.page2-product .product-block .block-text-wrapper h4{margin-bottom:4px;font-size:18px;line-height:24px;}.page2-product .product-block .block-text-wrapper p{margin-bottom:8px;font-size:12px;line-height:20px;}.page2-product .product-block .block-text-wrapper a{line-height:20px;}.page2-product .product-block .block-text-wrapper .components-button-wrapper{margin-top:16px;font-size:12px;}.page2-product .product-block .block-text-wrapper .components-button-wrapper a{display:block;}.page2-product .product-block .block-text-wrapper a.more-mobile-react,.page2-product .product-block .block-text-wrapper a.more-mobile-angular{margin-top:0;color:#1677ff;}.page2-product .product-block .block-text-wrapper a.more-mobile-react:hover,.page2-product .product-block .block-text-wrapper a.more-mobile-angular:hover{color:#40a9ff;}.page3{min-height:688px;background:url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg') no-repeat;-webkit-background-size:cover;background-size:cover;}.page3 .ant-row{margin:0 8px;}.page3 .page3-block{margin-bottom:32px;padding:24px;background:#ffffff;border-radius:4px;box-shadow:0 8px 16px rgba(174, 185, 193, 0.3);}.page3 .page3-block:nth-child(2) .page3-img-wrapper img{display:block;width:70%;margin:auto;}.page3 .page3-block p{font-size:12px;}.page3 .page3-block .page3-img-wrapper{width:20%;}.page3 .page3-block .page3-img-wrapper img{width:100%;}.page3 .page3-block .page3-text-wrapper{width:80%;max-width:initial;margin:0;padding-left:16px;}}</style><style data-emotion="css-global ttxzth">#nprogress .bar{background:#1677ff;}#nprogress .peg{box-shadow:0 0 10px #1677ff,0 0 5px #1677ff;}#nprogress .spinner-icon{border-top-color:#1677ff;border-left-color:#1677ff;}</style><style data-emotion="css-global qqeln4">.preview-image-boxes{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;float:right;clear:both;width:496px;margin:0 0 70px 64px;}.preview-image-boxes-with-carousel{width:420px;}.preview-image-boxes-with-carousel .preview-image-box img{padding:0;}.ant-row-rtl .preview-image-boxes{float:left;margin:0 64px 70px 0;}.preview-image-boxes+.preview-image-boxes{margin-top:-35px;}.preview-image-box{float:left;width:100%;}.preview-image-box+.preview-image-box{margin-left:24px;}.ant-row-rtl .preview-image-box+.preview-image-box{margin-right:24px;margin-left:0;}.preview-image-wrapper{position:relative;display:inline-block;width:100%;padding:16px;text-align:center;background:#f2f4f5;box-sizing:border-box;}.preview-image-wrapper.video{display:block;padding:0;background:0;}.preview-image-wrapper video{display:block;width:100%;}.preview-image-wrapper video +svg{position:absolute;top:0;left:0;}.preview-image-wrapper.good::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:3px;background:#1677ff;content:'';}.preview-image-wrapper.bad::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:3px;background:#ff4d4f;content:'';}.preview-image-title{margin-top:20px;color:rgba(0, 0, 0, 0.88);font-size:12px;}.preview-image-description{margin-top:2px;color:rgba(0, 0, 0, 0.65);font-size:12px;line-height:1.5;}.preview-image-description hr{margin:2px 0;background:none;border:0;}.preview-image-box img{box-sizing:border-box;max-width:100%;padding:12px;background:#ffffff;border-radius:6px;cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s;}.preview-image-box img.no-padding{padding:0;background:none;}.preview-image-boxes.preview-image-boxes-with-carousel img{padding:0;box-shadow:0 1px 0 0 #ddd,0 3px 0 0 #ffffff,0 4px 0 0 #ddd,0 6px 0 0 #ffffff,0 7px 0 0 #ddd;}.preview-image-box img:hover{box-shadow:1px 1px 6px rgba(0, 0, 0, 0.3);}.transition-video-player,.motion-video-min{float:right;width:600px;padding:0 0 70px 20px;}.transition-video-player .preview-image-wrapper,.motion-video-min .preview-image-wrapper{padding:0;}.ant-row-rtl .transition-video-player,.ant-row-rtl .motion-video-min{float:left;}.motion-video-min{width:390px;}.motion-principle-wrapper{width:100%;max-width:900px;margin:48px 0 24px;}.principle-wrapper{width:100%;}.principle-wrapper .principle{display:inline-block;box-sizing:border-box;width:100%;min-height:180px;margin-right:12.5%;margin-bottom:24px;padding:24px;font-size:24px;text-align:center;border:1px solid #e8e8e8;border-radius:4px;}.principle-wrapper .principle:last-child{margin-right:0;}.principle-wrapper .principle h4{margin:16px 0 8px;}.principle-wrapper .principle p{font-size:12px;line-height:24px;}</style><style data-emotion="css-global 3mbwcg">.design-inline-cards{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 -20px;}.design-inline-cards>*{-webkit-flex:10%;-ms-flex:10%;flex:10%;margin:0 20px;}.design-inline-cards img{width:100%;max-width:100%;}.design-inline-cards h4{margin-bottom:0;}</style><style data-emotion="css-global 12mrfb1">.color-palettes{margin:0 1%;}.color-palettes-dark{margin:0;padding:0 28px;background-color:#141414;}.color-palettes-dark .color-title{color:rgba(255, 255, 255, 0.85);}.color-palettes-dark .color-description{color:rgba(255, 255, 255, 0.45);}.color-palettes-dark .color-palette{margin:45px 3.5% 45px 0;}.color-palettes-dark .color-palette:nth-of-type(3n){margin-right:0;}.color-palettes-dark .color-palette .main-color-item{margin-right:0;}.color-palettes-dark .color-palette .main-color-item:hover{margin-right:-8px;}.color-palette{display:inline-block;width:31%;margin:45px 1%;}.color-palette-pick{margin:0 0 20px;font-size:20px;text-align:center;}.color-palette-picker{margin:24px 0;}.color-palette-picker-value{position:relative;top:-3px;margin-left:16px;font-size:14px;font-family:Consolas,sans-serif;}.ant-row-rtl .color-palette-picker-value{margin-right:16px;margin-left:0;}.color-palette-picker-validation{position:relative;top:-3px;margin-left:16px;color:#ff4d4f;font-size:13px;}.ant-row-rtl .color-palette-picker-validation{margin-right:16px;margin-left:0;}.color-palette-picker-validation-dark{margin-left:0;}.main-color{text-align:left;}.main-color .palette-blue-1{background:#e6f4ff;}.main-color .palette-blue-2{background:#bae0ff;}.main-color .palette-blue-3{background:#91caff;}.main-color .palette-blue-4{background:#69b1ff;}.main-color .palette-blue-5{background:#4096ff;}.main-color .palette-blue-6{background:#1677ff;}.main-color .palette-blue-7{background:#0958d9;}.main-color .palette-blue-8{background:#003eb3;}.main-color .palette-blue-9{background:#002c8c;}.main-color .palette-blue-10{background:#001d66;}.main-color .palette-purple-1{background:#f9f0ff;}.main-color .palette-purple-2{background:#efdbff;}.main-color .palette-purple-3{background:#d3adf7;}.main-color .palette-purple-4{background:#b37feb;}.main-color .palette-purple-5{background:#9254de;}.main-color .palette-purple-6{background:#722ed1;}.main-color .palette-purple-7{background:#531dab;}.main-color .palette-purple-8{background:#391085;}.main-color .palette-purple-9{background:#22075e;}.main-color .palette-purple-10{background:#120338;}.main-color .palette-cyan-1{background:#e6fffb;}.main-color .palette-cyan-2{background:#b5f5ec;}.main-color .palette-cyan-3{background:#87e8de;}.main-color .palette-cyan-4{background:#5cdbd3;}.main-color .palette-cyan-5{background:#36cfc9;}.main-color .palette-cyan-6{background:#13c2c2;}.main-color .palette-cyan-7{background:#08979c;}.main-color .palette-cyan-8{background:#006d75;}.main-color .palette-cyan-9{background:#00474f;}.main-color .palette-cyan-10{background:#002329;}.main-color .palette-green-1{background:#f6ffed;}.main-color .palette-green-2{background:#d9f7be;}.main-color .palette-green-3{background:#b7eb8f;}.main-color .palette-green-4{background:#95de64;}.main-color .palette-green-5{background:#73d13d;}.main-color .palette-green-6{background:#52c41a;}.main-color .palette-green-7{background:#389e0d;}.main-color .palette-green-8{background:#237804;}.main-color .palette-green-9{background:#135200;}.main-color .palette-green-10{background:#092b00;}.main-color .palette-magenta-1{background:#fff0f6;}.main-color .palette-magenta-2{background:#ffd6e7;}.main-color .palette-magenta-3{background:#ffadd2;}.main-color .palette-magenta-4{background:#ff85c0;}.main-color .palette-magenta-5{background:#f759ab;}.main-color .palette-magenta-6{background:#eb2f96;}.main-color .palette-magenta-7{background:#c41d7f;}.main-color .palette-magenta-8{background:#9e1068;}.main-color .palette-magenta-9{background:#780650;}.main-color .palette-magenta-10{background:#520339;}.main-color .palette-red-1{background:#fff1f0;}.main-color .palette-red-2{background:#ffccc7;}.main-color .palette-red-3{background:#ffa39e;}.main-color .palette-red-4{background:#ff7875;}.main-color .palette-red-5{background:#ff4d4f;}.main-color .palette-red-6{background:#f5222d;}.main-color .palette-red-7{background:#cf1322;}.main-color .palette-red-8{background:#a8071a;}.main-color .palette-red-9{background:#820014;}.main-color .palette-red-10{background:#5c0011;}.main-color .palette-volcano-1{background:#fff2e8;}.main-color .palette-volcano-2{background:#ffd8bf;}.main-color .palette-volcano-3{background:#ffbb96;}.main-color .palette-volcano-4{background:#ff9c6e;}.main-color .palette-volcano-5{background:#ff7a45;}.main-color .palette-volcano-6{background:#fa541c;}.main-color .palette-volcano-7{background:#d4380d;}.main-color .palette-volcano-8{background:#ad2102;}.main-color .palette-volcano-9{background:#871400;}.main-color .palette-volcano-10{background:#610b00;}.main-color .palette-orange-1{background:#fff7e6;}.main-color .palette-orange-2{background:#ffe7ba;}.main-color .palette-orange-3{background:#ffd591;}.main-color .palette-orange-4{background:#ffc069;}.main-color .palette-orange-5{background:#ffa940;}.main-color .palette-orange-6{background:#fa8c16;}.main-color .palette-orange-7{background:#d46b08;}.main-color .palette-orange-8{background:#ad4e00;}.main-color .palette-orange-9{background:#873800;}.main-color .palette-orange-10{background:#612500;}.main-color .palette-gold-1{background:#fffbe6;}.main-color .palette-gold-2{background:#fff1b8;}.main-color .palette-gold-3{background:#ffe58f;}.main-color .palette-gold-4{background:#ffd666;}.main-color .palette-gold-5{background:#ffc53d;}.main-color .palette-gold-6{background:#faad14;}.main-color .palette-gold-7{background:#d48806;}.main-color .palette-gold-8{background:#ad6800;}.main-color .palette-gold-9{background:#874d00;}.main-color .palette-gold-10{background:#613400;}.main-color .palette-yellow-1{background:#feffe6;}.main-color .palette-yellow-2{background:#ffffb8;}.main-color .palette-yellow-3{background:#fffb8f;}.main-color .palette-yellow-4{background:#fff566;}.main-color .palette-yellow-5{background:#ffec3d;}.main-color .palette-yellow-6{background:#fadb14;}.main-color .palette-yellow-7{background:#d4b106;}.main-color .palette-yellow-8{background:#ad8b00;}.main-color .palette-yellow-9{background:#876800;}.main-color .palette-yellow-10{background:#614700;}.main-color .palette-lime-1{background:#fcffe6;}.main-color .palette-lime-2{background:#f4ffb8;}.main-color .palette-lime-3{background:#eaff8f;}.main-color .palette-lime-4{background:#d3f261;}.main-color .palette-lime-5{background:#bae637;}.main-color .palette-lime-6{background:#a0d911;}.main-color .palette-lime-7{background:#7cb305;}.main-color .palette-lime-8{background:#5b8c00;}.main-color .palette-lime-9{background:#3f6600;}.main-color .palette-lime-10{background:#254000;}.main-color .palette-geekblue-1{background:#f0f5ff;}.main-color .palette-geekblue-2{background:#d6e4ff;}.main-color .palette-geekblue-3{background:#adc6ff;}.main-color .palette-geekblue-4{background:#85a5ff;}.main-color .palette-geekblue-5{background:#597ef7;}.main-color .palette-geekblue-6{background:#2f54eb;}.main-color .palette-geekblue-7{background:#1d39c4;}.main-color .palette-geekblue-8{background:#10239e;}.main-color .palette-geekblue-9{background:#061178;}.main-color .palette-geekblue-10{background:#030852;}.main-color .palette-gray-1{background:#fff;}.main-color .palette-gray-2{background:#fafafa;}.main-color .palette-gray-3{background:#f5f5f5;}.main-color .palette-gray-4{background:#f0f0f0;}.main-color .palette-gray-5{background:#d9d9d9;}.main-color .palette-gray-6{background:#bfbfbf;}.main-color .palette-gray-7{background:#8c8c8c;}.main-color .palette-gray-8{background:#595959;}.main-color .palette-gray-9{background:#434343;}.main-color .palette-gray-10{background:#262626;}.main-color .palette-gray-11{background:#1f1f1f;}.main-color .palette-gray-12{background:#141414;}.main-color .palette-gray-13{background:#000;}.main-color-item{position:relative;height:44px;margin-right:4px;padding:0 12px;font-size:14px;font-family:Consolas,sans-serif;line-height:44px;cursor:pointer;-webkit-transition:all 0.2s;transition:all 0.2s;}.main-color-item:first-child{border-radius:4px 4px 0 0;}.main-color-item:last-child{border-radius:0 0 4px 4px;}.main-color-item:hover{margin-right:-8px;border-radius:0 4px 4px 0;}.main-color-item .main-color-text{float:left;-webkit-transition:all 0.3s;transition:all 0.3s;}.main-color-item .main-color-value{position:relative;left:3px;float:right;-webkit-transform:scale(0.85);-moz-transform:scale(0.85);-ms-transform:scale(0.85);transform:scale(0.85);transform-origin:100% 50%;opacity:0;-webkit-transition:all 0.3s;transition:all 0.3s;}.color-title{margin:0 0 24px;color:#5c6b77;font-weight:500;font-size:22px;text-align:center;text-transform:capitalize;}.color-description{display:block;color:#777;font-weight:lighter;font-size:14px;}.main-color:hover .main-color-value{left:0;opacity:0.7;}.color-palette-horizontal{box-sizing:border-box;width:100%;}.color-palette-horizontal-dark{height:303px;padding:32px 28px;background-color:#141414;}.color-palette-horizontal-dark .color-palette-picker{margin-bottom:0;}.color-palette-horizontal-dark .color-palette-pick{color:rgba(255, 255, 255, 0.65);text-align:left;}.color-palette-horizontal-dark .color-palette-pick-hex{color:rgba(255, 255, 255, 0.65);}.ant-row-rtl .color-palette-horizontal-dark .color-palette-pick{direction:rtl;text-align:right;}.color-palette-horizontal .main-color{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.color-palette-horizontal .main-color-item{position:relative;-webkit-flex:1;-ms-flex:1;flex:1;box-sizing:border-box;height:86px;margin-right:0;padding:37px 0 0;line-height:normal;text-align:center;border-radius:0;}.color-palette-horizontal .main-color-item .main-color-text{float:none;}.color-palette-horizontal .main-color-item:hover{height:96px;margin-top:-10px;border-radius:4px 4px 0 0;}.color-palette-horizontal .main-color-value{position:absolute;bottom:0;left:0;width:100%;text-align:center;transform-origin:unset;}.color-palette-horizontal .main-color:hover .main-color-item{padding-top:8px;}.color-palette-horizontal .main-color:hover .main-color-value{bottom:8px;opacity:0.7;}</style><style data-emotion="css-global 1kp1585">h1 >a[aria-hidden]:first-child,h2 >a[aria-hidden]:first-child,h3 >a[aria-hidden]:first-child,h4 >a[aria-hidden]:first-child,h5 >a[aria-hidden]:first-child,h6 >a[aria-hidden]:first-child{float:left;width:20px;-webkit-padding-end:4px;padding-inline-end:4px;font-size:0;line-height:inherit;text-align:right;-webkit-padding-end:4px;padding-inline-end:4px;-webkit-margin-start:-24px;margin-inline-start:-24px;}[data-direction='rtl'] h1 >a[aria-hidden]:first-child,[data-direction='rtl'] h2 >a[aria-hidden]:first-child,[data-direction='rtl'] h3 >a[aria-hidden]:first-child,[data-direction='rtl'] h4 >a[aria-hidden]:first-child,[data-direction='rtl'] h5 >a[aria-hidden]:first-child,[data-direction='rtl'] h6 >a[aria-hidden]:first-child{float:right;}h1 >a[aria-hidden]:first-child:hover,h2 >a[aria-hidden]:first-child:hover,h3 >a[aria-hidden]:first-child:hover,h4 >a[aria-hidden]:first-child:hover,h5 >a[aria-hidden]:first-child:hover,h6 >a[aria-hidden]:first-child:hover{border:0;}h1 >a[aria-hidden]:first-child >.icon-link::before,h2 >a[aria-hidden]:first-child >.icon-link::before,h3 >a[aria-hidden]:first-child >.icon-link::before,h4 >a[aria-hidden]:first-child >.icon-link::before,h5 >a[aria-hidden]:first-child >.icon-link::before,h6 >a[aria-hidden]:first-child >.icon-link::before{font-size:20px;content:'#';}h1:not(:hover)>a[aria-hidden]:first-child>.icon-link,h2:not(:hover)>a[aria-hidden]:first-child>.icon-link,h3:not(:hover)>a[aria-hidden]:first-child>.icon-link,h4:not(:hover)>a[aria-hidden]:first-child>.icon-link,h5:not(:hover)>a[aria-hidden]:first-child>.icon-link,h6:not(:hover)>a[aria-hidden]:first-child>.icon-link{visibility:hidden;}</style><style data-emotion="css-global 1or24qf">html .dumi-default-search-bar-input{color:rgba(0, 0, 0, 0.88);background:#ffffff;}html .dumi-default-search-bar-input:focus{background:#ffffff;}html .dumi-default-search-bar-input::-webkit-input-placeholder{color:rgba(0, 0, 0, 0.25)!important;}html .dumi-default-search-bar-input::-moz-placeholder{color:rgba(0, 0, 0, 0.25)!important;}html .dumi-default-search-bar-input:-ms-input-placeholder{color:rgba(0, 0, 0, 0.25)!important;}html .dumi-default-search-bar-input::placeholder{color:rgba(0, 0, 0, 0.25)!important;}html .dumi-default-search-popover{background-color:#ffffff!important;}html .dumi-default-search-popover::before{border-bottom-color:#ffffff!important;}html .dumi-default-search-result dl dt{background-color:#e6f4ff!important;}html .dumi-default-search-result dl dd a:hover{background-color:rgba(0, 0, 0, 0.04);}html .dumi-default-search-result dl dd a:hover h4,html .dumi-default-search-result dl dd a:hover p{color:rgba(0, 0, 0, 0.88)!important;}html .dumi-default-search-result dl dd a:hover svg{fill:rgba(0, 0, 0, 0.88)!important;}</style><style data-emotion="css 1m6c83y">.css-1m6c83y{position:relative;z-index:10;max-width:100%;background:#ffffff;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.03),0 1px 6px -1px rgba(0, 0, 0, 0.02),0 2px 4px 0 rgba(0, 0, 0, 0.02);}@media only screen and (max-width: 767.99px){.css-1m6c83y{text-align:center;}}.css-1m6c83y .nav-search-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:auto;-ms-flex:auto;flex:auto;}.css-1m6c83y .dumi-default-search-bar{border-inline-start:1px solid rgba(0, 0, 0, 0.06);}.css-1m6c83y .dumi-default-search-bar >svg{width:14px;fill:#ced4d9;}.css-1m6c83y .dumi-default-search-bar >input{height:22px;border:0;}.css-1m6c83y .dumi-default-search-bar >input:focus{box-shadow:none;}.css-1m6c83y .dumi-default-search-bar >input::-webkit-input-placeholder{color:#ced4d9;}.css-1m6c83y .dumi-default-search-bar >input::-moz-placeholder{color:#ced4d9;}.css-1m6c83y .dumi-default-search-bar >input:-ms-input-placeholder{color:#ced4d9;}.css-1m6c83y .dumi-default-search-bar >input::placeholder{color:#ced4d9;}.css-1m6c83y .dumi-default-search-bar .dumi-default-search-shortcut{color:#ced4d9;background-color:rgba(150, 150, 150, 0.06);border-color:rgba(100, 100, 100, 0.2);border-radius:4px;}.css-1m6c83y .dumi-default-search-bar .dumi-default-search-popover{inset-inline-start:11px;inset-inline-end:unset;}.css-1m6c83y .dumi-default-search-bar .dumi-default-search-popover::before{inset-inline-start:100px;inset-inline-end:unset;}</style><style data-emotion="css 10if06k">.css-10if06k{height:64px;-webkit-padding-start:40px;padding-inline-start:40px;overflow:hidden;color:rgba(0, 0, 0, 0.88);font-weight:bold;font-size:18px;font-family:AlibabaPuHuiTi,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif;line-height:64px;letter-spacing:-0.18px;white-space:nowrap;-webkit-text-decoration:none;text-decoration:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-10if06k:hover{color:rgba(0, 0, 0, 0.88);}.css-10if06k img{height:32px;vertical-align:middle;-webkit-margin-end:12px;margin-inline-end:12px;}@media only screen and (max-width: 767.99px){.css-10if06k{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:0;padding-inline-end:0;}}</style><style data-emotion="css zsb1p1">.css-zsb1p1{line-height:32px;}</style><style data-emotion="css xbxnqh">.css-xbxnqh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;}.css-xbxnqh >*{-webkit-flex:none;-ms-flex:none;flex:none;margin:0;-webkit-margin-end:12px;margin-inline-end:12px;}.css-xbxnqh >*:last-child{-webkit-margin-end:40px;margin-inline-end:40px;}</style><style data-emotion="css 1n8kzv5">.css-1n8kzv5{height:100%;font-size:14px;font-family:Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif;border:0;}.css-1n8kzv5.ant-menu-horizontal{border-bottom:none;}.css-1n8kzv5.ant-menu-horizontal>.ant-menu-item,.css-1n8kzv5.ant-menu-horizontal>.ant-menu-submenu{min-width:64px;height:64px;padding-right:12px;padding-left:12px;line-height:64px;}.css-1n8kzv5.ant-menu-horizontal>.ant-menu-item::after,.css-1n8kzv5.ant-menu-horizontal>.ant-menu-submenu::after{top:0;right:12px;bottom:auto;left:12px;border-width:2px;}.css-1n8kzv5.ant-menu-horizontal .ant-menu-submenu-title .anticon{margin:0;}.css-1n8kzv5.ant-menu-horizontal>.ant-menu-item-selected a{color:#1677ff;}.css-1n8kzv5>.ant-menu-item,.css-1n8kzv5>.ant-menu-submenu{text-align:center;}</style><style data-emotion="css f8juvi">.css-f8juvi{font-size:9px;margin:-1px 0 0 2px;vertical-align:middle;}</style><style data-emotion="css 14dvgsk">.css-14dvgsk{color:rgba(0, 0, 0, 0.88);border-color:#d9d9d9;padding:0!important;width:32px;height:32px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border:none;background:transparent;border-radius:6px;-webkit-transition:all 0s;transition:all 0s;cursor:pointer;}.css-14dvgsk .btn-inner{-webkit-transition:all 0s;transition:all 0s;}.css-14dvgsk:hover{background:rgba(0, 0, 0, 0.06);}.css-14dvgsk img{width:1.2em;height:1.2em;}.css-14dvgsk .anticon{font-size:1.2em;}</style><style data-emotion="css l1r9gy">.css-l1r9gy{position:relative;width:1.2em;height:1.2em;}</style><style data-emotion="css 1tyqv1q">.css-1tyqv1q{position:absolute;font-size:1.2em;line-height:1;border:1px solid rgba(0, 0, 0, 0.88);color:rgba(0, 0, 0, 0.88);left:-5%;top:0;z-index:1;background-color:rgba(0, 0, 0, 0.88);color:#ffffff;-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-ms-transform:scale(0.7);transform:scale(0.7);transform-origin:0 0;}</style><style data-emotion="css 16okui4">.css-16okui4{position:absolute;font-size:1.2em;line-height:1;border:1px solid rgba(0, 0, 0, 0.88);color:rgba(0, 0, 0, 0.88);right:-5%;bottom:0;z-index:0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);transform-origin:100% 100%;}</style><style data-emotion="css 1cjitc6">.css-1cjitc6{width:16px;}</style><style data-emotion="css pmt1eg">.css-pmt1eg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:40px;}</style><style data-emotion="css 14h0zo3">.css-14h0zo3{z-index:1;}.css-14h0zo3 .main-menu-inner{position:-webkit-sticky;position:sticky;top:0;width:100%;height:100%;max-height:100vh;overflow:hidden;}.css-14h0zo3:hover .main-menu-inner{overflow-y:auto;}</style><style data-emotion="css 1x4s3ls">.css-1x4s3ls{min-height:100%;padding-bottom:48px;font-family:Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif;}.css-1x4s3ls.ant-menu-inline .ant-menu-submenu-title h4,.css-1x4s3ls.ant-menu-inline >.ant-menu-item,.css-1x4s3ls.ant-menu-inline .ant-menu-item a{overflow:hidden;font-size:14px;text-overflow:ellipsis;}.css-1x4s3ls.ant-menu-inline >.ant-menu-item-group>.ant-menu-item-group-title{margin-top:16px;margin-bottom:16px;font-size:13px;}.css-1x4s3ls.ant-menu-inline >.ant-menu-item-group>.ant-menu-item-group-title::after{position:relative;top:12px;display:block;width:calc(100% - 20px);height:1px;background:rgba(5, 5, 5, 0.06);content:'';}.css-1x4s3ls.ant-menu-inline >.ant-menu-item,.css-1x4s3ls.ant-menu-inline >.ant-menu-submenu>.ant-menu-submenu-title,.css-1x4s3ls.ant-menu-inline >.ant-menu-item-group>.ant-menu-item-group-title,.css-1x4s3ls.ant-menu-inline >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item,.css-1x4s3ls.ant-menu-inline.ant-menu-inline>.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item{padding-left:40px!important;}.ant-row-rtl .css-1x4s3ls.ant-menu-inline >.ant-menu-item,.ant-row-rtl .css-1x4s3ls.ant-menu-inline >.ant-menu-submenu>.ant-menu-submenu-title,.ant-row-rtl .css-1x4s3ls.ant-menu-inline >.ant-menu-item-group>.ant-menu-item-group-title,.ant-row-rtl .css-1x4s3ls.ant-menu-inline >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item,.ant-row-rtl .css-1x4s3ls.ant-menu-inline.ant-menu-inline>.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item{padding-right:40px!important;padding-left:16px!important;}.css-1x4s3ls.ant-menu-inline.ant-menu-inline .ant-menu-item-group-title{margin-left:4px;padding-left:60px;}.ant-row-rtl .css-1x4s3ls.ant-menu-inline.ant-menu-inline .ant-menu-item-group-title{padding-right:60px;padding-left:16px;}.css-1x4s3ls.ant-menu-inline.ant-menu-inline .ant-menu-item-group-list>.ant-menu-item{padding-left:80px!important;}.ant-row-rtl .css-1x4s3ls.ant-menu-inline.ant-menu-inline .ant-menu-item-group-list>.ant-menu-item{padding-right:80px!important;padding-left:16px!important;}.css-1x4s3ls.ant-menu-inline .ant-menu-item-group:first-child .ant-menu-item-group-title{margin-top:0;}.css-1x4s3ls a[disabled]{color:#ccc;}.css-1x4s3ls .chinese{margin-left:6px;font-weight:normal;font-size:12px;opacity:0.67;}</style><style data-emotion="css 3m1f9t">.css-3m1f9t{position:absolute;top:8px;inset-inline-end:0;width:160px;margin:12px 0;padding:8px 0;padding-inline:4px 8px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:6px;box-sizing:border-box;}.css-3m1f9t .toc-debug{color:#722ed1;}.css-3m1f9t .toc-debug:hover{color:#9254de;}.css-3m1f9t >div{box-sizing:border-box;width:100%;max-height:calc(100vh - 40px)!important;margin:0 auto;overflow:auto;padding-inline:4px;}@media only screen and (max-width: 992px){.css-3m1f9t{display:none;}}</style><style data-emotion="css 1mtserg">.css-1mtserg .ant-anchor .ant-anchor-link-title{font-size:12px;}</style><style data-emotion="css 324864">.css-324864{padding:0 170px 32px 64px;}.css-324864.rtl{padding:0 64px 144px 170px;}@media only screen and (max-width: 992px){.css-324864,.css-324864.rtl{padding:0 48px;}}</style><style data-emotion="css le7aoc">a.css-le7aoc{position:relative;top:-2px;display:inline-block;-webkit-text-decoration:none;text-decoration:none;vertical-align:middle;-webkit-margin-start:6px;margin-inline-start:6px;}a.css-le7aoc .anticon{display:block;color:rgba(0, 0, 0, 0.45);font-size:16px;-webkit-transition:all 0.3s;transition:all 0.3s;}a.css-le7aoc .anticon:hover{color:rgba(0, 0, 0, 0.88);}</style><style data-emotion="css uqqeki">.css-uqqeki{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:120px!important;clear:both;}.css-uqqeki a,.css-uqqeki .ant-avatar+.ant-avatar{-webkit-transition:all 0s;transition:all 0s;-webkit-margin-end:-8px;margin-inline-end:-8px;}.css-uqqeki:hover a,.css-uqqeki:hover .ant-avatar{-webkit-margin-end:0;margin-inline-end:0;}</style><style data-emotion="css 1d0sb0m">.css-1d0sb0m{width:calc(100% - 234px);-webkit-margin-end:170px;margin-inline-end:170px;-webkit-margin-start:64px;margin-inline-start:64px;overflow:hidden;font-size:14px;border-top:1px solid rgba(5, 5, 5, 0.06);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><style data-emotion="css gls9j">.css-gls9j{-webkit-flex:1;-ms-flex:1;flex:1;height:72px;line-height:72px;-webkit-text-decoration:none;text-decoration:none;text-align:start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-gls9j .anticon{color:#999;font-size:12px;-webkit-transition:all 0.3s;transition:all 0.3s;}.css-gls9j .chinese{-webkit-margin-start:4px;margin-inline-start:4px;}.css-gls9j .footer-nav-icon-after{display:none;}.css-gls9j .footer-nav-icon-before{position:relative;line-height:0;vertical-align:middle;-webkit-transition:inset-inline-end 0.3s;transition:inset-inline-end 0.3s;-webkit-margin-end:1em;margin-inline-end:1em;inset-inline-end:0;}.css-gls9j:hover .footer-nav-icon-before{inset-inline-end:0.2em;}</style><style data-emotion="css 8o1xq">.css-8o1xq{-webkit-flex:1;-ms-flex:1;flex:1;height:72px;line-height:72px;-webkit-text-decoration:none;text-decoration:none;text-align:end;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-8o1xq .anticon{color:#999;font-size:12px;-webkit-transition:all 0.3s;transition:all 0.3s;}.css-8o1xq .chinese{-webkit-margin-start:4px;margin-inline-start:4px;}.css-8o1xq .footer-nav-icon-before{display:none;}.css-8o1xq .footer-nav-icon-after{position:relative;margin-bottom:1px;line-height:0;vertical-align:middle;-webkit-transition:inset-inline-start 0.3s;transition:inset-inline-start 0.3s;-webkit-margin-start:1em;margin-inline-start:1em;inset-inline-start:0;}.css-8o1xq:hover .footer-nav-icon-after{inset-inline-start:0.2em;}</style><style data-emotion="css v9zvbc">.css-v9zvbc{background:#f0f3fa;color:rgba(0, 0, 0, 0.65);box-shadow:inset 0 106px 36px -116px rgba(0, 0, 0, 0.14);}.css-v9zvbc *{box-sizing:border-box;}.css-v9zvbc h2,.css-v9zvbc a{color:rgba(0, 0, 0, 0.88);}.css-v9zvbc .rc-footer-column{margin-bottom:0px;}.css-v9zvbc .rc-footer-column:last-child{margin-bottom:0px;}.css-v9zvbc .rc-footer-item-icon{top:-1.5px;}.css-v9zvbc .rc-footer-container{max-width:1208px;margin-inline:auto;padding-inline:48px;}.css-v9zvbc .rc-footer-bottom{box-shadow:inset 0 106px 36px -116px rgba(0, 0, 0, 0.14);}.css-v9zvbc .rc-footer-bottom .rc-footer-bottom-container{font-size:14px;}</style><style data-emotion="css 1ppfagk">.css-1ppfagk{cursor:pointer;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;line-height:40px;}</style><style data-emotion="css 109zw3h">.css-109zw3h{font-size:16px;margin-right:8px;}.css-109zw3h svg{-webkit-transition:all 0.3s;transition:all 0.3s;}</style></head>
<body>
<noscript><b>Enable JavaScript to run this app.</b></noscript><div id="root"><!--$?--><template id="B:0"></template><div></div><!--/$--></div><script>window.__UMI_LOADER_DATA__ = {}</script>
<script src="/umi.61c7c9c4.js" crossorigin="anonymous"></script>
</body></html><div hidden id="S:0"><!--$?--><template id="B:1"></template><div></div><!--/$--></div><script>function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}};$RC("B:0","S:0")</script><div hidden id="S:1"><div class="css-17ju5m3 ant-app"><!--$?--><template id="B:2"></template><div></div><!--/$--><div class="ant-float-btn-group css-17ju5m3 ant-float-btn-group-circle"><button class="css-17ju5m3 ant-float-btn ant-float-btn-default ant-float-btn-circle" type="button"><span class="ant-badge css-17ju5m3"><div class="ant-float-btn-body"><div class="ant-float-btn-content"><div class="ant-float-btn-icon"><span role="img" class="anticon"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><g fill-rule="evenodd"><g fill-rule="nonzero"><path d="M7.02 3.635l12.518 12.518a1.863 1.863 0 010 2.635l-1.317 1.318a1.863 1.863 0 01-2.635 0L3.068 7.588A2.795 2.795 0 117.02 3.635zm2.09 14.428a.932.932 0 110 1.864.932.932 0 010-1.864zm-.043-9.747L7.75 9.635l9.154 9.153 1.318-1.317-9.154-9.155zM3.52 12.473c.514 0 .931.417.931.931v.932h.932a.932.932 0 110 1.864h-.932v.931a.932.932 0 01-1.863 0l-.001-.931h-.93a.932.932 0 010-1.864h.93v-.932c0-.514.418-.931.933-.931zm15.374-3.727a1.398 1.398 0 110 2.795 1.398 1.398 0 010-2.795zM4.385 4.953a.932.932 0 000 1.317l2.046 2.047L7.75 7 5.703 4.953a.932.932 0 00-1.318 0zM14.701.36a.932.932 0 01.931.932v.931h.932a.932.932 0 010 1.864h-.933l.001.932a.932.932 0 11-1.863 0l-.001-.932h-.93a.932.932 0 110-1.864h.93v-.931a.932.932 0 01.933-.932z"></path></g></g></svg></span></div></div></div></span></button></div></div></div><script>$RC("B:1","S:1")</script><div hidden id="S:2"><header class="clearfix css-1m6c83y"><div class="ant-row css-17ju5m3" style="flex-flow:nowrap;height:64px"><div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-6 ant-col-xl-5 ant-col-xxl-4 css-17ju5m3"><h1><a class="css-10if06k" href="/index-cn"><img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="logo"/><span class="css-zsb1p1">Ant Design</span></a></h1></div><div class="ant-col css-xbxnqh ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-18 ant-col-xl-19 ant-col-xxl-20 css-17ju5m3"><div class="nav-search-wrapper"><div class="dumi-default-search-bar"><svg viewBox="64 64 896 896" class="dumi-default-search-bar-svg"><path d="M909.6 854.5 649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg><input class="dumi-default-search-bar-input" placeholder="输入关键字搜索..."/><span class="dumi-default-search-shortcut">⌘<!-- --> K</span></div></div><ul class="ant-menu ant-menu-root ant-menu-horizontal ant-menu-light css-1n8kzv5 css-17ju5m3" style="border-right:0" dir="ltr" role="menu" tabindex="0" data-menu-list="true"><li class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/docs/spec/introduce-cn">设计</a></span></li><li class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/docs/react/introduce-cn">研发</a></span></li><li class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/overview-cn/">组件</a></span></li><li class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/docs/blog/suspense-cn">博客</a></span></li><li class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/docs/resources-cn">资源</a></span></li></ul><div style="display:none" aria-hidden="true"></div><div class="ant-select ant-select-sm version css-17ju5m3 ant-select-single ant-select-show-arrow"><div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" autoComplete="off" class="ant-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="undefined_list" aria-autocomplete="list" aria-controls="undefined_list" aria-activedescendant="undefined_list_0" readonly="" unselectable="on" style="opacity:0" value=""/></span><span class="ant-select-selection-item" title="5.7.1">5.7.1</span></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div><button type="button" class="ant-btn css-17ju5m3 ant-btn-default ant-btn-sm ant-dropdown-trigger">更多<span role="img" aria-label="down" class="anticon anticon-down css-f8juvi"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></button><button class="css-14dvgsk"><div class="btn-inner"><div class="css-l1r9gy"><span class="css-1tyqv1q">中</span><span class="css-16okui4">En</span></div></div></button><button class="css-14dvgsk"><div class="btn-inner"><span role="img" direction="ltr" class="anticon css-1cjitc6"><svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><svg viewBox="0 0 1024 1024" fill="currentColor"><path d="M448 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM64 448l256 224-256 224z"></path></svg></svg></span></div></button><a href="https://github.com/ant-design/ant-design" target="_blank" rel="noreferrer"><button class="css-14dvgsk"><div class="btn-inner"><span role="img" aria-label="github" class="anticon anticon-github"><svg viewBox="64 64 896 896" focusable="false" data-icon="github" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg></span></div></button></a></div></div></header><main class="css-pmt1eg"><div class="ant-col css-14h0zo3 ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-6 ant-col-xl-5 ant-col-xxl-4 css-17ju5m3"><section class="main-menu-inner"><ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-light css-1x4s3ls css-zfrcbl" dir="ltr" role="menu" tabindex="0" data-menu-list="true"><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/overview-cn">组件总览</a></span></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title" title="通用">通用</div><ul role="group" class="ant-menu-item-group-list"><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/button-cn"><span>Button</span><span class="chinese">按钮</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/icon-cn"><span>Icon</span><span class="chinese">图标</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/typography-cn"><span>Typography</span><span class="chinese">排版</span></a></span></li></ul></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title" title="布局">布局</div><ul role="group" class="ant-menu-item-group-list"><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/divider-cn"><span>Divider</span><span class="chinese">分割线</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/grid-cn"><span>Grid</span><span class="chinese">栅格</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/layout-cn"><span>Layout</span><span class="chinese">布局</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/space-cn"><span>Space</span><span class="chinese">间距</span></a></span></li></ul></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title" title="导航">导航</div><ul role="group" class="ant-menu-item-group-list"><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/anchor-cn"><span>Anchor</span><span class="chinese">锚点</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/breadcrumb-cn"><span>Breadcrumb</span><span class="chinese">面包屑</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/dropdown-cn"><span>Dropdown</span><span class="chinese">下拉菜单</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/menu-cn"><span>Menu</span><span class="chinese">导航菜单</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/pagination-cn"><span>Pagination</span><span class="chinese">分页</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/steps-cn"><span>Steps</span><span class="chinese">步骤条</span></a></span></li></ul></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title" title="数据录入">数据录入</div><ul role="group" class="ant-menu-item-group-list"><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/auto-complete-cn"><span>AutoComplete</span><span class="chinese">自动完成</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/cascader-cn"><span>Cascader</span><span class="chinese">级联选择</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/checkbox-cn"><span>Checkbox</span><span class="chinese">多选框</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/color-picker-cn"><span>ColorPicker</span><span class="chinese">颜色选择器</span><span class="ant-tag ant-tag-warning css-zfrcbl" style="margin-inline-start:8px">New</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/date-picker-cn"><span>DatePicker</span><span class="chinese">日期选择框</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/form-cn"><span>Form</span><span class="chinese">表单</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/input-cn"><span>Input</span><span class="chinese">输入框</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/input-number-cn"><span>InputNumber</span><span class="chinese">数字输入框</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/mentions-cn"><span>Mentions</span><span class="chinese">提及</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/radio-cn"><span>Radio</span><span class="chinese">单选框</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/rate-cn"><span>Rate</span><span class="chinese">评分</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/select-cn"><span>Select</span><span class="chinese">选择器</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/slider-cn"><span>Slider</span><span class="chinese">滑动输入条</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/switch-cn"><span>Switch</span><span class="chinese">开关</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/time-picker-cn"><span>TimePicker</span><span class="chinese">时间选择框</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/transfer-cn"><span>Transfer</span><span class="chinese">穿梭框</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/tree-select-cn"><span>TreeSelect</span><span class="chinese">树选择</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/upload-cn"><span>Upload</span><span class="chinese">上传</span></a></span></li></ul></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title" title="数据展示">数据展示</div><ul role="group" class="ant-menu-item-group-list"><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/avatar-cn"><span>Avatar</span><span class="chinese">头像</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/badge-cn"><span>Badge</span><span class="chinese">徽标数</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/calendar-cn"><span>Calendar</span><span class="chinese">日历</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/card-cn"><span>Card</span><span class="chinese">卡片</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/carousel-cn"><span>Carousel</span><span class="chinese">走马灯</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/collapse-cn"><span>Collapse</span><span class="chinese">折叠面板</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/descriptions-cn"><span>Descriptions</span><span class="chinese">描述列表</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/empty-cn"><span>Empty</span><span class="chinese">空状态</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/image-cn"><span>Image</span><span class="chinese">图片</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/list-cn"><span>List</span><span class="chinese">列表</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/popover-cn"><span>Popover</span><span class="chinese">气泡卡片</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/qr-code-cn"><span>QRCode</span><span class="chinese">二维码</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/segmented-cn"><span>Segmented</span><span class="chinese">分段控制器</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/statistic-cn"><span>Statistic</span><span class="chinese">统计数值</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/table-cn"><span>Table</span><span class="chinese">表格</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/tabs-cn"><span>Tabs</span><span class="chinese">标签页</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/tag-cn"><span>Tag</span><span class="chinese">标签</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/timeline-cn"><span>Timeline</span><span class="chinese">时间轴</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/tooltip-cn"><span>Tooltip</span><span class="chinese">文字提示</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/tour-cn"><span>Tour</span><span class="chinese">漫游式引导</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/tree-cn"><span>Tree</span><span class="chinese">树形控件</span></a></span></li></ul></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title" title="反馈">反馈</div><ul role="group" class="ant-menu-item-group-list"><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/alert-cn"><span>Alert</span><span class="chinese">警告提示</span></a></span></li><li class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/drawer-cn"><span>Drawer</span><span class="chinese">抽屉</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/message-cn"><span>Message</span><span class="chinese">全局提示</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/modal-cn"><span>Modal</span><span class="chinese">对话框</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/notification-cn"><span>Notification</span><span class="chinese">通知提醒框</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/popconfirm-cn"><span>Popconfirm</span><span class="chinese">气泡确认框</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/progress-cn"><span>Progress</span><span class="chinese">进度条</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/result-cn"><span>Result</span><span class="chinese">结果</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/skeleton-cn"><span>Skeleton</span><span class="chinese">骨架屏</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/spin-cn"><span>Spin</span><span class="chinese">加载中</span></a></span></li></ul></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title" title="其他">其他</div><ul role="group" class="ant-menu-item-group-list"><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/affix-cn"><span>Affix</span><span class="chinese">固钉</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/app-cn"><span>App</span><span class="chinese">包裹组件</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/config-provider-cn"><span>ConfigProvider</span><span class="chinese">全局化配置</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/float-button-cn"><span>FloatButton</span><span class="chinese">悬浮按钮</span></a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:30px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/components/watermark-cn"><span>Watermark</span><span class="chinese">水印</span></a></span></li></ul></li></ul><div style="display:none" aria-hidden="true"></div></section></div><div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-18 ant-col-xl-19 ant-col-xxl-20 css-17ju5m3"><div><div class=""><section class="css-3m1f9t"><div class="css-17ju5m3 ant-anchor-wrapper css-1mtserg" style="max-height:100vh"><div class="ant-anchor"><span class="ant-anchor-ink"></span><div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#何时使用" title="何时使用">何时使用</a></div><div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#代码演示" title="代码演示">代码演示</a><div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-drawer-demo-basic-right" title=""><span class="">基础抽屉</span></a></div><div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-drawer-demo-placement" title=""><span class="">自定义位置</span></a></div><div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-drawer-demo-extra" title=""><span class="">额外操作</span></a></div><div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-drawer-demo-render-in-current" title=""><span class="">渲染在当前 DOM</span></a></div><div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-drawer-demo-form-in-drawer" title=""><span class="">抽屉表单</span></a></div><div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-drawer-demo-user-profile" title=""><span class="">信息预览抽屉</span></a></div><div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-drawer-demo-multi-level-drawer" title=""><span class="">多层抽屉</span></a></div><div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-drawer-demo-size" title=""><span class="">预设宽度</span></a></div></div><div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a></div><div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#design-token" title="Design Token">Design Token</a></div></div></div></section></div></div><article class=" css-324864"><h1 class="ant-typography css-17ju5m3" style="font-size:30px">Drawer<span style="margin-left:12px">抽屉</span><a href="https://github.com/ant-design/ant-design/edit/master/components/drawer/index.zh-CN.md" target="_blank" rel="noopener noreferrer" class="css-le7aoc"><span role="img" aria-label="edit" class="anticon anticon-edit"><svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></span></a></h1><!--$?--><template id="B:3"></template><div></div><!--/$--><div class="css-uqqeki" style="display:flex;list-style:none;margin:0;padding:0"><div class="ant-skeleton ant-skeleton-element ant-skeleton-active css-17ju5m3"><span class="ant-skeleton-avatar ant-skeleton-avatar-sm ant-skeleton-avatar-circle" style="margin-left:0"></span></div><div class="ant-skeleton ant-skeleton-element ant-skeleton-active css-17ju5m3"><span class="ant-skeleton-avatar ant-skeleton-avatar-sm ant-skeleton-avatar-circle" style="margin-left:-8px"></span></div><div class="ant-skeleton ant-skeleton-element ant-skeleton-active css-17ju5m3"><span class="ant-skeleton-avatar ant-skeleton-avatar-sm ant-skeleton-avatar-circle" style="margin-left:-8px"></span></div></div></article><section class="css-1d0sb0m"><a href="/components/alert-cn" class="css-gls9j"><span role="img" aria-label="left" class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span><span>Alert</span><span class="chinese">警告提示</span><span role="img" aria-label="right" class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></a><a href="/components/message-cn" class="css-8o1xq"><span role="img" aria-label="left" class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span><span>Message</span><span class="chinese">全局提示</span><span role="img" aria-label="right" class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></a></section><footer class="rc-footer css-v9zvbc rc-footer-dark"><section class="rc-footer-container"><section class="rc-footer-columns"><div class="rc-footer-column"><h2>相关资源</h2><div class="rc-footer-item"><a href="https://charts.ant.design" target="_blank" rel="noopener noreferrer">Ant Design Charts</a></div><div class="rc-footer-item"><a href="https://pro.ant.design" target="_blank" rel="noopener noreferrer">Ant Design Pro</a></div><div class="rc-footer-item"><a href="https://procomponents.ant.design" target="_blank" rel="noopener noreferrer">Ant Design Pro Components</a></div><div class="rc-footer-item"><a href="https://mobile.ant.design" target="_blank" rel="noopener noreferrer">Ant Design Mobile</a></div><div class="rc-footer-item"><a href="https://mini.ant.design" target="_blank" rel="noopener noreferrer">Ant Design Mini</a></div><div class="rc-footer-item"><a href="https://landing.ant.design" target="_blank" rel="noopener noreferrer">Ant Design Landing</a><span class="rc-footer-item-separator">-</span><span class="rc-footer-item-description">首页模板集</span></div><div class="rc-footer-item"><a href="https://scaffold.ant.design" target="_blank" rel="noopener noreferrer">Scaffolds</a><span class="rc-footer-item-separator">-</span><span class="rc-footer-item-description">脚手架市场</span></div><div class="rc-footer-item"><a href="https://umijs.org" target="_blank" rel="noopener noreferrer">Umi</a><span class="rc-footer-item-separator">-</span><span class="rc-footer-item-description">React 应用开发框架</span></div><div class="rc-footer-item"><a href="https://d.umijs.org" target="_blank" rel="noopener noreferrer">dumi</a><span class="rc-footer-item-separator">-</span><span class="rc-footer-item-description">组件/文档研发工具</span></div><div class="rc-footer-item"><a href="https://qiankun.umijs.org" target="_blank" rel="noopener noreferrer">qiankun</a><span class="rc-footer-item-separator">-</span><span class="rc-footer-item-description">微前端框架</span></div><div class="rc-footer-item"><a href="https://github.com/alibaba/hooks" target="_blank" rel="noopener noreferrer">ahooks</a><span class="rc-footer-item-separator">-</span><span class="rc-footer-item-description">React Hooks 库</span></div><div class="rc-footer-item"><a href="https://motion.ant.design" target="_blank" rel="noopener noreferrer">Ant Motion</a><span class="rc-footer-item-separator">-</span><span class="rc-footer-item-description">设计动效</span></div><div class="rc-footer-item"><a href="https://ant-design.antgroup.com">国内镜像站点 🇨🇳</a></div></div><div class="rc-footer-column"><h2>社区</h2><div class="rc-footer-item"><a href="https://github.com/websemantics/awesome-ant-design" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><span role="img" aria-label="ant-design" class="anticon anticon-ant-design"><svg viewBox="64 64 896 896" focusable="false" data-icon="ant-design" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"></path></svg></span></span>Awesome Ant Design</a></div><div class="rc-footer-item"><a href="http://medium.com/ant-design/" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><span role="img" aria-label="medium" class="anticon anticon-medium"><svg viewBox="64 64 896 896" focusable="false" data-icon="medium" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M834.7 279.8l61.3-58.9V208H683.7L532.4 586.4 360.3 208H137.7v12.9l71.6 86.6c7 6.4 10.6 15.8 9.7 25.2V673c2.2 12.3-1.7 24.8-10.3 33.7L128 805v12.7h228.6v-12.9l-80.6-98a39.99 39.99 0 01-11.1-33.7V378.7l200.7 439.2h23.3l172.6-439.2v349.9c0 9.2 0 11.1-6 17.2l-62.1 60.3V819h301.2v-12.9l-59.9-58.9c-5.2-4-7.9-10.7-6.8-17.2V297a18.1 18.1 0 016.8-17.2z"></path></svg></span></span>Medium</a></div><div class="rc-footer-item"><a href="http://twitter.com/antdesignui" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><span role="img" aria-label="twitter" style="color:#1DA1F2" class="anticon anticon-twitter"><svg viewBox="64 64 896 896" focusable="false" data-icon="twitter" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M928 254.3c-30.6 13.2-63.9 22.7-98.2 26.4a170.1 170.1 0 0075-94 336.64 336.64 0 01-108.2 41.2A170.1 170.1 0 00672 174c-94.5 0-170.5 76.6-170.5 170.6 0 13.2 1.6 26.4 4.2 39.1-141.5-7.4-267.7-75-351.6-178.5a169.32 169.32 0 00-23.2 86.1c0 59.2 30.1 111.4 76 142.1a172 172 0 01-77.1-21.7v2.1c0 82.9 58.6 151.6 136.7 167.4a180.6 180.6 0 01-44.9 5.8c-11.1 0-21.6-1.1-32.2-2.6C211 652 273.9 701.1 348.8 702.7c-58.6 45.9-132 72.9-211.7 72.9-14.3 0-27.5-.5-41.2-2.1C171.5 822 261.2 850 357.8 850 671.4 850 843 590.2 843 364.7c0-7.4 0-14.8-.5-22.2 33.2-24.3 62.3-54.4 85.5-88.2z"></path></svg></span></span>Twitter</a></div><div class="rc-footer-item"><a href="https://yuque.com/ant-design/ant-design" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><img src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" alt="yuque"/></span>Ant Design 语雀专栏</a></div><div class="rc-footer-item"><a href="https://www.zhihu.com/column/c_1564262000561106944" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><span role="img" aria-label="zhihu" style="color:#056de8" class="anticon anticon-zhihu"><svg viewBox="64 64 896 896" focusable="false" data-icon="zhihu" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M564.7 230.1V803h60l25.2 71.4L756.3 803h131.5V230.1H564.7zm247.7 497h-59.9l-75.1 50.4-17.8-50.4h-18V308.3h170.7v418.8zM526.1 486.9H393.3c2.1-44.9 4.3-104.3 6.6-172.9h130.9l-.1-8.1c0-.6-.2-14.7-2.3-29.1-2.1-15-6.6-34.9-21-34.9H287.8c4.4-20.6 15.7-69.7 29.4-93.8l6.4-11.2-12.9-.7c-.8 0-19.6-.9-41.4 10.6-35.7 19-51.7 56.4-58.7 84.4-18.4 73.1-44.6 123.9-55.7 145.6-3.3 6.4-5.3 10.2-6.2 12.8-1.8 4.9-.8 9.8 2.8 13 10.5 9.5 38.2-2.9 38.5-3 .6-.3 1.3-.6 2.2-1 13.9-6.3 55.1-25 69.8-84.5h56.7c.7 32.2 3.1 138.4 2.9 172.9h-141l-2.1 1.5c-23.1 16.9-30.5 63.2-30.8 65.2l-1.4 9.2h167c-12.3 78.3-26.5 113.4-34 127.4-3.7 7-7.3 14-10.7 20.8-21.3 42.2-43.4 85.8-126.3 153.6-3.6 2.8-7 8-4.8 13.7 2.4 6.3 9.3 9.1 24.6 9.1 5.4 0 11.8-.3 19.4-1 49.9-4.4 100.8-18 135.1-87.6 17-35.1 31.7-71.7 43.9-108.9L497 850l5-12c.8-1.9 19-46.3 5.1-95.9l-.5-1.8-108.1-123-22 16.6c6.4-26.1 10.6-49.9 12.5-71.1h158.7v-8c0-40.1-18.5-63.9-19.2-64.9l-2.4-3z"></path></svg></span></span>Ant Design 知乎专栏</a></div><div class="rc-footer-item"><a href="https://www.zhihu.com/column/c_1543658574504751104" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><span role="img" aria-label="zhihu" style="color:#056de8" class="anticon anticon-zhihu"><svg viewBox="64 64 896 896" focusable="false" data-icon="zhihu" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M564.7 230.1V803h60l25.2 71.4L756.3 803h131.5V230.1H564.7zm247.7 497h-59.9l-75.1 50.4-17.8-50.4h-18V308.3h170.7v418.8zM526.1 486.9H393.3c2.1-44.9 4.3-104.3 6.6-172.9h130.9l-.1-8.1c0-.6-.2-14.7-2.3-29.1-2.1-15-6.6-34.9-21-34.9H287.8c4.4-20.6 15.7-69.7 29.4-93.8l6.4-11.2-12.9-.7c-.8 0-19.6-.9-41.4 10.6-35.7 19-51.7 56.4-58.7 84.4-18.4 73.1-44.6 123.9-55.7 145.6-3.3 6.4-5.3 10.2-6.2 12.8-1.8 4.9-.8 9.8 2.8 13 10.5 9.5 38.2-2.9 38.5-3 .6-.3 1.3-.6 2.2-1 13.9-6.3 55.1-25 69.8-84.5h56.7c.7 32.2 3.1 138.4 2.9 172.9h-141l-2.1 1.5c-23.1 16.9-30.5 63.2-30.8 65.2l-1.4 9.2h167c-12.3 78.3-26.5 113.4-34 127.4-3.7 7-7.3 14-10.7 20.8-21.3 42.2-43.4 85.8-126.3 153.6-3.6 2.8-7 8-4.8 13.7 2.4 6.3 9.3 9.1 24.6 9.1 5.4 0 11.8-.3 19.4-1 49.9-4.4 100.8-18 135.1-87.6 17-35.1 31.7-71.7 43.9-108.9L497 850l5-12c.8-1.9 19-46.3 5.1-95.9l-.5-1.8-108.1-123-22 16.6c6.4-26.1 10.6-49.9 12.5-71.1h158.7v-8c0-40.1-18.5-63.9-19.2-64.9l-2.4-3z"></path></svg></span></span>体验科技专栏</a></div><div class="rc-footer-item"><a href="https://seeconf.antfin.com/" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><img src="https://gw.alipayobjects.com/zos/rmsportal/mZBWtboYbnMkTBaRIuWQ.png" alt="seeconf"/></span>SEE Conf</a><span class="rc-footer-item-separator">-</span><span class="rc-footer-item-description">蚂蚁体验科技大会</span></div><div class="rc-footer-item"><a href="/docs/resources-cn#加入我们"><span class="rc-footer-item-icon"><span role="img" aria-label="usergroup-add" class="anticon anticon-usergroup-add"><svg viewBox="64 64 896 896" focusable="false" data-icon="usergroup-add" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M892 772h-80v-80c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v80h-80c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h80v80c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-80h80c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM373.5 498.4c-.9-8.7-1.4-17.5-1.4-26.4 0-15.9 1.5-31.4 4.3-46.5.7-3.6-1.2-7.3-4.5-8.8-13.6-6.1-26.1-14.5-36.9-25.1a127.54 127.54 0 01-38.7-95.4c.9-32.1 13.8-62.6 36.3-85.6 24.7-25.3 57.9-39.1 93.2-38.7 31.9.3 62.7 12.6 86 34.4 7.9 7.4 14.7 15.6 20.4 24.4 2 3.1 5.9 4.4 9.3 3.2 17.6-6.1 36.2-10.4 55.3-12.4 5.6-.6 8.8-6.6 6.3-11.6-32.5-64.3-98.9-108.7-175.7-109.9-110.8-1.7-203.2 89.2-203.2 200 0 62.8 28.9 118.8 74.2 155.5-31.8 14.7-61.1 35-86.5 60.4-54.8 54.7-85.8 126.9-87.8 204a8 8 0 008 8.2h56.1c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5 29.4-29.4 65.4-49.8 104.7-59.7 3.8-1.1 6.4-4.8 5.9-8.8zM824 472c0-109.4-87.9-198.3-196.9-200C516.3 270.3 424 361.2 424 472c0 62.8 29 118.8 74.2 155.5a300.95 300.95 0 00-86.4 60.4C357 742.6 326 814.8 324 891.8a8 8 0 008 8.2h56c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5C505.8 695.7 563 672 624 672c110.4 0 200-89.5 200-200zm-109.5 90.5C690.3 586.7 658.2 600 624 600s-66.3-13.3-90.5-37.5a127.26 127.26 0 01-37.5-91.8c.3-32.8 13.4-64.5 36.3-88 24-24.6 56.1-38.3 90.4-38.7 33.9-.3 66.8 12.9 91 36.6 24.8 24.3 38.4 56.8 38.4 91.4-.1 34.2-13.4 66.3-37.6 90.5z"></path></svg></span></span>加入我们</a></div></div><div class="rc-footer-column"><h2>帮助</h2><div class="rc-footer-item"><a href="https://github.com/ant-design/ant-design" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><span role="img" aria-label="github" class="anticon anticon-github"><svg viewBox="64 64 896 896" focusable="false" data-icon="github" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg></span></span>GitHub</a></div><div class="rc-footer-item"><a href="/changelog-cn"><span class="rc-footer-item-icon"><span role="img" aria-label="history" class="anticon anticon-history"><svg viewBox="64 64 896 896" focusable="false" data-icon="history" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M536.1 273H488c-4.4 0-8 3.6-8 8v275.3c0 2.6 1.2 5 3.3 6.5l165.3 120.7c3.6 2.6 8.6 1.9 11.2-1.7l28.6-39c2.7-3.7 1.9-8.7-1.7-11.2L544.1 528.5V281c0-4.4-3.6-8-8-8zm219.8 75.2l156.8 38.3c5 1.2 9.9-2.6 9.9-7.7l.8-161.5c0-6.7-7.7-10.5-12.9-6.3L752.9 334.1a8 8 0 003 14.1zm167.7 301.1l-56.7-19.5a8 8 0 00-10.1 4.8c-1.9 5.1-3.9 10.1-6 15.1-17.8 42.1-43.3 80-75.9 112.5a353 353 0 01-112.5 75.9 352.18 352.18 0 01-137.7 27.8c-47.8 0-94.1-9.3-137.7-27.8a353 353 0 01-112.5-75.9c-32.5-32.5-58-70.4-75.9-112.5A353.44 353.44 0 01171 512c0-47.8 9.3-94.2 27.8-137.8 17.8-42.1 43.3-80 75.9-112.5a353 353 0 01112.5-75.9C430.6 167.3 477 158 524.8 158s94.1 9.3 137.7 27.8A353 353 0 01775 261.7c10.2 10.3 19.8 21 28.6 32.3l59.8-46.8C784.7 146.6 662.2 81.9 524.6 82 285 82.1 92.6 276.7 95 516.4 97.4 751.9 288.9 942 524.8 942c185.5 0 343.5-117.6 403.7-282.3 1.5-4.2-.7-8.9-4.9-10.4z"></path></svg></span></span>更新日志</a></div><div class="rc-footer-item"><a href="/docs/react/faq-cn"><span class="rc-footer-item-icon"><span role="img" aria-label="question-circle" class="anticon anticon-question-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"></path></svg></span></span>常见问题</a></div><div class="rc-footer-item"><a href="https://new-issue.ant.design/" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><span role="img" aria-label="bug" class="anticon anticon-bug"><svg viewBox="64 64 896 896" focusable="false" data-icon="bug" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M304 280h56c4.4 0 8-3.6 8-8 0-28.3 5.9-53.2 17.1-73.5 10.6-19.4 26-34.8 45.4-45.4C450.9 142 475.7 136 504 136h16c28.3 0 53.2 5.9 73.5 17.1 19.4 10.6 34.8 26 45.4 45.4C650 218.9 656 243.7 656 272c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-40-8.8-76.7-25.9-108.1a184.31 184.31 0 00-74-74C596.7 72.8 560 64 520 64h-16c-40 0-76.7 8.8-108.1 25.9a184.31 184.31 0 00-74 74C304.8 195.3 296 232 296 272c0 4.4 3.6 8 8 8z"></path><path d="M940 512H792V412c76.8 0 139-62.2 139-139 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8a63 63 0 01-63 63H232a63 63 0 01-63-63c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 76.8 62.2 139 139 139v100H84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h148v96c0 6.5.2 13 .7 19.3C164.1 728.6 116 796.7 116 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-44.2 23.9-82.9 59.6-103.7a273 273 0 0022.7 49c24.3 41.5 59 76.2 100.5 100.5S460.5 960 512 960s99.8-13.9 141.3-38.2a281.38 281.38 0 00123.2-149.5A120 120 0 01836 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-79.3-48.1-147.4-116.7-176.7.4-6.4.7-12.8.7-19.3v-96h148c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM716 680c0 36.8-9.7 72-27.8 102.9-17.7 30.3-43 55.6-73.3 73.3C584 874.3 548.8 884 512 884s-72-9.7-102.9-27.8c-30.3-17.7-55.6-43-73.3-73.3A202.75 202.75 0 01308 680V412h408v268z"></path></svg></span></span>报告 Bug</a></div><div class="rc-footer-item"><a href="https://github.com/ant-design/ant-design/issues" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><span role="img" aria-label="issues-close" class="anticon anticon-issues-close"><svg viewBox="64 64 896 896" focusable="false" data-icon="issues-close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm72-112c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48zm400-188h-59.3c-2.6 0-5 1.2-6.5 3.3L763.7 538.1l-49.9-68.8a7.92 7.92 0 00-6.5-3.3H648c-6.5 0-10.3 7.4-6.5 12.7l109.2 150.7a16.1 16.1 0 0026 0l165.8-228.7c3.8-5.3 0-12.7-6.5-12.7zm-44 306h-64.2c-5.5 0-10.6 2.9-13.6 7.5a352.2 352.2 0 01-49.8 62.2A355.92 355.92 0 01651.1 840a355 355 0 01-138.7 27.9c-48.1 0-94.8-9.4-138.7-27.9a355.92 355.92 0 01-113.3-76.3A353.06 353.06 0 01184 650.5c-18.6-43.8-28-90.5-28-138.5s9.4-94.7 28-138.5c17.9-42.4 43.6-80.5 76.4-113.2 32.8-32.7 70.9-58.4 113.3-76.3a355 355 0 01138.7-27.9c48.1 0 94.8 9.4 138.7 27.9 42.4 17.9 80.5 43.6 113.3 76.3 19 19 35.6 39.8 49.8 62.2 2.9 4.7 8.1 7.5 13.6 7.5H892c6 0 9.8-6.3 7.2-11.6C828.8 178.5 684.7 82 517.7 80 278.9 77.2 80.5 272.5 80 511.2 79.5 750.1 273.3 944 512.4 944c169.2 0 315.6-97 386.7-238.4A8 8 0 00892 694z"></path></svg></span></span>议题</a></div><div class="rc-footer-item"><a href="https://github.com/ant-design/ant-design/discussions" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><span role="img" aria-label="message" class="anticon anticon-message"><svg viewBox="64 64 896 896" focusable="false" data-icon="message" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"></path></svg></span></span>讨论区</a></div><div class="rc-footer-item"><a href="http://stackoverflow.com/questions/tagged/antd" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><span role="img" aria-label="question-circle" class="anticon anticon-question-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"></path></svg></span></span>StackOverflow</a></div><div class="rc-footer-item"><a href="https://segmentfault.com/t/antd" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><span role="img" aria-label="question-circle" class="anticon anticon-question-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"></path></svg></span></span>SegmentFault</a></div></div><div class="rc-footer-column"><h2><span class="rc-footer-column-icon"><img src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt="Ant XTech"/></span>更多产品</h2><div class="rc-footer-item"><a href="https://yuque.com" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><img src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" alt="yuque"/></span>语雀</a><span class="rc-footer-item-separator">-</span><span class="rc-footer-item-description">构建你的数字花园</span></div><div class="rc-footer-item"><a href="https://antv.vision" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><img src="https://gw.alipayobjects.com/zos/antfincdn/nc7Fc0XBg5/8a6844f5-a6ed-4630-9177-4fa5d0b7dd47.png" alt="AntV"/></span>AntV</a><span class="rc-footer-item-separator">-</span><span class="rc-footer-item-description">数据可视化解决方案</span></div><div class="rc-footer-item"><a href="https://eggjs.org" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><img src="https://www.eggjs.org/logo.svg" alt="Egg"/></span>Egg</a><span class="rc-footer-item-separator">-</span><span class="rc-footer-item-description">企业级 Node.js 框架</span></div><div class="rc-footer-item"><a href="https://kitchen.alipay.com" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><img src="https://gw.alipayobjects.com/zos/rmsportal/DMDOlAUhmktLyEODCMBR.ico" alt="kitchen"/></span>Kitchen</a><span class="rc-footer-item-separator">-</span><span class="rc-footer-item-description">Sketch 工具集</span></div><div class="rc-footer-item"><a href="https://xtech.antfin.com/" target="_blank" rel="noopener noreferrer"><span class="rc-footer-item-icon"><img src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt="xtech"/></span>蚂蚁体验科技</a></div><div class="rc-footer-item"><a href="/theme-editor-cn"><span class="rc-footer-item-icon"><span role="img" aria-label="bg-colors" class="anticon anticon-bg-colors"><svg viewBox="64 64 896 896" focusable="false" data-icon="bg-colors" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M766.4 744.3c43.7 0 79.4-36.2 79.4-80.5 0-53.5-79.4-140.8-79.4-140.8S687 610.3 687 663.8c0 44.3 35.7 80.5 79.4 80.5zm-377.1-44.1c7.1 7.1 18.6 7.1 25.6 0l256.1-256c7.1-7.1 7.1-18.6 0-25.6l-256-256c-.6-.6-1.3-1.2-2-1.7l-78.2-78.2a9.11 9.11 0 00-12.8 0l-48 48a9.11 9.11 0 000 12.8l67.2 67.2-207.8 207.9c-7.1 7.1-7.1 18.6 0 25.6l255.9 256zm12.9-448.6l178.9 178.9H223.4l178.8-178.9zM904 816H120c-4.4 0-8 3.6-8 8v80c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-80c0-4.4-3.6-8-8-8z"></path></svg></span></span>主题编辑器</a></div></div></section></section><section class="rc-footer-bottom"><div class="rc-footer-bottom-container"><div style="opacity:0.4">Made with <span style="color:#fff">❤</span> by</div><div>蚂蚁集团和 Ant Design 开源社区</div></div></section></footer></div></main></div><script>$RC("B:2","S:2")</script><div hidden id="S:3"><div class="markdown"><p>屏幕边缘滑出的浮层面板。</p><h2 id="何时使用"><a aria-hidden="true" tabindex="-1" href="#何时使用"><span class="icon icon-link"></span></a>何时使用</h2><p>抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。</p><ul><li>当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。</li><li>当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。</li></ul><h2 id="代码演示"><a aria-hidden="true" tabindex="-1" href="#代码演示"><span class="icon icon-link"></span></a>代码演示</h2></div><div class="demo-wrapper"><span class="all-code-box-controls"><span role="img" aria-label="code" tabindex="-1" class="anticon anticon-code code-box-expand-trigger"><svg viewBox="64 64 896 896" focusable="false" data-icon="code" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M516 673c0 4.4 3.4 8 7.5 8h185c4.1 0 7.5-3.6 7.5-8v-48c0-4.4-3.4-8-7.5-8h-185c-4.1 0-7.5 3.6-7.5 8v48zm-194.9 6.1l192-161c3.8-3.2 3.8-9.1 0-12.3l-192-160.9A7.95 7.95 0 00308 351v62.7c0 2.4 1 4.6 2.9 6.1L420.7 512l-109.8 92.2a8.1 8.1 0 00-2.9 6.1V673c0 6.8 7.9 10.5 13.1 6.1zM880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path></svg></span><span role="img" aria-label="bug" tabindex="-1" class="anticon anticon-bug code-box-expand-trigger"><svg viewBox="64 64 896 896" focusable="false" data-icon="bug" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M304 280h56c4.4 0 8-3.6 8-8 0-28.3 5.9-53.2 17.1-73.5 10.6-19.4 26-34.8 45.4-45.4C450.9 142 475.7 136 504 136h16c28.3 0 53.2 5.9 73.5 17.1 19.4 10.6 34.8 26 45.4 45.4C650 218.9 656 243.7 656 272c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-40-8.8-76.7-25.9-108.1a184.31 184.31 0 00-74-74C596.7 72.8 560 64 520 64h-16c-40 0-76.7 8.8-108.1 25.9a184.31 184.31 0 00-74 74C304.8 195.3 296 232 296 272c0 4.4 3.6 8 8 8z"></path><path d="M940 512H792V412c76.8 0 139-62.2 139-139 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8a63 63 0 01-63 63H232a63 63 0 01-63-63c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 76.8 62.2 139 139 139v100H84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h148v96c0 6.5.2 13 .7 19.3C164.1 728.6 116 796.7 116 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-44.2 23.9-82.9 59.6-103.7a273 273 0 0022.7 49c24.3 41.5 59 76.2 100.5 100.5S460.5 960 512 960s99.8-13.9 141.3-38.2a281.38 281.38 0 00123.2-149.5A120 120 0 01836 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-79.3-48.1-147.4-116.7-176.7.4-6.4.7-12.8.7-19.3v-96h148c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM716 680c0 36.8-9.7 72-27.8 102.9-17.7 30.3-43 55.6-73.3 73.3C584 874.3 548.8 884 512 884s-72-9.7-102.9-27.8c-30.3-17.7-55.6-43-73.3-73.3A202.75 202.75 0 01308 680V412h408v268z"></path></svg></span></span><div style="display:flex;margin:-8px" data-dumi-demo-grid="true"><section style="flex:1;padding:8px;width:0"><section class="code-box" id="components-drawer-demo-basic-right"><section class="code-box-demo"><button type="button" class="ant-btn css-17ju5m3 ant-btn-primary"><span>Open</span></button></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-drawer-demo-basic-right">基础抽屉</a><a href="https://github.com/ant-design/ant-design/edit/master/components/drawer/demo/basic-right.tsx" target="_blank" rel="noopener noreferrer" class="css-le7aoc"><span role="img" aria-label="edit" class="anticon anticon-edit"><svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></span></a></div><div class="code-box-description"><div><p>基础抽屉，点击触发按钮抽屉从右滑出，点击遮罩区关闭。</p></div></div><div class="ant-space css-17ju5m3 ant-space-horizontal ant-space-align-center code-box-actions" style="flex-wrap:wrap;margin-bottom:-16px"><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiIF_qgAh6C9RoEkdAAQBaIWkYATAAIBWAgHYCARhAAaEAFs0ESohC7JMAB7EEGoygZHyGCPGYTakzvKWqNAJxiYm-gHrKABwEAAxh6iDSTiJGcBC45AD0EDTkCPpQaPRwTBrStACeVnBJ3r6cgSHhoZEFxfBlPhi0saSalcFhEV7NrZLtndU9IJ4YIgCurFCV8gDMAEwj5S0icBieECi0GSD-8jUgAL4WMABuACIwVuQ2dg7ILA3rm9uz3QvHGi9bO8y5aE8flGfTWG1-cCEAKBkQARhNoC59CtWj9tpD4YjIjlgSiwa8dkIcaIRAwzgBeEgDDoaGBEGAtTh4tGEukMpgnECwzykADucBgnjgUAguSQAG0QAA-cILACkkXIpFoQiMaBcAF0jpzDCYCBg4BlqHQGMCvgZbnqdsZmGl6IxOBBNChSEChAAlPpCMA8zRCADkKP9AG4ADrkJ0ut3AIQbHz0d2kZVCI7e30BvHUpIYEWmkPhyOulVXTSkNPtAMEJJGUv58jhuPZGCJ5UACgGGAmmlNBHwtAAorBu4wAEKFACSklb_rtOnIgv9AEpFwRvJbPK2ADwlstJKWLsPkIRCc010gEa22k0O_SFt2e3xqIQxiYCgDKtCbKfLfsDfTrd4qv6Va6qYBpwABzpFs-QgjlMtAUE-FyeGgvKCt-PoVv6TiSHWDYULkQgAIIoCgiAen0BAAGIAMJCOSQitou9FSs-4bHmkhHiqQNxPgKtAAPI3Bq9FCK-MAfk2rZgGgUACge4bsbGBEqnAAAWfLIah6EMUxLFsUex5QjAgk3K2tCeBMMAKYZRyHkpnEqhQNFQKQAqiXp5KscASnHvxQkMNJsnyYex52YphneLQEyeEera-UIm5Sglx6bnBtAIUeRRWOSoYgCgmzaJ4hR5UIzkitg5LAOpmkoWhnhHMlhlGUZAX1s1Rmbkk6WZU1LWpVp9VEmwsC5SAI5oPEGBCINgqlSgWQYDAw60GNmy4GptCleVbkwFVO0CqmPEMPtNyNSlnUoFKb7tDAymMKacAEM9XVXRdqVXTd3b3faOzPQQr19f1H3XbdP2Pf9gMXV1s2eEDqV7kpNnhe1JhRiqRgyRMUAqiRKDBuaoEEJtmgzI8dqmpwCWbgAhBcAk0QAKgAmgACv2Qgk1A8OdVzQhZOQuBjQweU8y1m5qT4khi_1m7dp-sZqYC_FjVMYAiEEovvZ18toEI5BoN2Y1nPYvLo6VFOMGNvIQJItBqeSRgm0tIg23balProbAQLJYKyXtyh8WpmzkFgIgISIkCrUqWsdcDcsmXrBtG3l9vLTAIg0K5ngW9eq15QAxKExcl7HwMI5L6oy6lsKkJIhTV51kgQGcQi22Ns66HNIBQkUo15egkjN4L5ELAALCgxilYjceyyyUqOUIpYTIwABydd3QxHZdj2faDuno4TlOM50HOC4Hl18_a11tf1zLXVczzxzakAA"/><span role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor"><path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><span role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor"><path d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span class="code-box-code-action"><span role="img" aria-label="thunderbolt" class="anticon anticon-thunderbolt code-box-stackblitz"><svg viewBox="64 64 896 896" focusable="false" data-icon="thunderbolt" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7zM378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211L378.2 732.5z"></path></svg></span></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span role="img" aria-label="snippets" tabindex="-1" class="anticon anticon-snippets code-box-code-copy code-box-code-action"><svg viewBox="64 64 896 896" focusable="false" data-icon="snippets" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 112H724V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H500V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H320c-17.7 0-32 14.3-32 32v120h-96c-17.7 0-32 14.3-32 32v632c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32v-96h96c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM664 888H232V336h218v174c0 22.1 17.9 40 40 40h174v338zm0-402H514V336h.2L664 485.8v.2zm128 274h-56V456L544 264H360v-80h68v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h152v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h68v576z"></path></svg></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><a class="code-box-code-action" target="_blank" rel="noreferrer" href="/~demos/components-drawer-demo-basic-right"><span role="img" class="anticon code-box-separate"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z"></path><path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z"></path></svg></span></a></div><div class="ant-space-item" style="padding-bottom:16px"><div class="code-expand-icon code-box-code-action"><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg" class="code-expand-icon-hide"/></div></div></div></section><section class="highlight-wrapper"><div class="highlight"><div class="ant-tabs ant-tabs-top ant-tabs-centered css-17ju5m3"><div role="tablist" class="ant-tabs-nav"><div class="ant-tabs-nav-wrap"><div class="ant-tabs-nav-list" style="transform:translate(0px, 0px)"><div data-node-key="tsx" class="ant-tabs-tab ant-tabs-tab-active"><div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0">TypeScript</div></div><div data-node-key="jsx" class="ant-tabs-tab"><div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0">JavaScript</div></div><div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div></div></div><div class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"><button type="button" class="ant-tabs-nav-more" style="visibility:hidden;order:1" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="null-more-popup" id="null-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button></div></div><div class="ant-tabs-content-holder"><div class="ant-tabs-content ant-tabs-content-top"><div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"><pre class="language-tsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Drawer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token literal-property property">App</span><span class="token operator">:</span> React<span class="token punctuation">.</span><span class="token function-variable function">FC</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>open<span class="token punctuation">,</span> setOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">showDrawer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">onClose</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Button type<span class="token operator">=</span><span class="token string">"primary"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>showDrawer<span class="token punctuation">}</span><span class="token operator">></span>
Open
<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span>Drawer title<span class="token operator">=</span><span class="token string">"Basic Drawer"</span> placement<span class="token operator">=</span><span class="token string">"right"</span> onClose<span class="token operator">=</span><span class="token punctuation">{</span>onClose<span class="token punctuation">}</span> open<span class="token operator">=</span><span class="token punctuation">{</span>open<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>p<span class="token operator">></span>Some contents<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span>p<span class="token operator">></span>Some contents<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span>p<span class="token operator">></span>Some contents<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Drawer<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</code></pre></div></div></div></div></div></section></section><section class="code-box" id="components-drawer-demo-extra"><section class="code-box-demo"><div class="ant-space css-17ju5m3 ant-space-horizontal ant-space-align-center"><div class="ant-space-item" style="margin-right:8px"><div class="ant-radio-group ant-radio-group-outline css-17ju5m3"><label class="ant-radio-wrapper css-17ju5m3"><span class="ant-radio"><input class="ant-radio-input" type="radio" value="top"/><span class="ant-radio-inner"></span></span><span>top</span></label><label class="ant-radio-wrapper ant-radio-wrapper-checked css-17ju5m3"><span class="ant-radio ant-radio-checked"><input class="ant-radio-input" type="radio" checked="" value="right"/><span class="ant-radio-inner"></span></span><span>right</span></label><label class="ant-radio-wrapper css-17ju5m3"><span class="ant-radio"><input class="ant-radio-input" type="radio" value="bottom"/><span class="ant-radio-inner"></span></span><span>bottom</span></label><label class="ant-radio-wrapper css-17ju5m3"><span class="ant-radio"><input class="ant-radio-input" type="radio" value="left"/><span class="ant-radio-inner"></span></span><span>left</span></label></div></div><div class="ant-space-item"><button type="button" class="ant-btn css-17ju5m3 ant-btn-primary"><span>Open</span></button></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-drawer-demo-extra">额外操作</a><a href="https://github.com/ant-design/ant-design/edit/master/components/drawer/demo/extra.tsx" target="_blank" rel="noopener noreferrer" class="css-le7aoc"><span role="img" aria-label="edit" class="anticon anticon-edit"><svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></span></a></div><div class="code-box-description"><div><p>在 Ant Design 规范中，操作按钮建议放在抽屉的右上角，可以使用 <code>extra</code> 属性来实现。</p></div></div><div class="ant-space css-17ju5m3 ant-space-horizontal ant-space-align-center code-box-actions" style="flex-wrap:wrap;margin-bottom:-16px"><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiILkZgaJqCzJoB15AAQBaIWkYATAAIBWAgHYCARhAAaEAFs0ESohC7JMAB7EEGoygZHyGCPGYTakzvKWqNAJxiYm-gHrKABwEAAxh6iDSTiJGcBC45AD0EDTkCPpQaPRwTBrStACeVnBJ3r6cgSHhoZEFxfBlPhi0saSalcFhEV7NrZLtndU9IJ4YIgCurFCV8gDMAEwj5S0icBieECi0GSD-8jUgAL4WMABuACIwVuQ2dg7ILA3rm9uz3QvHGi9bO8y5aE8flGfTWG1-cCEAKBkQARhNoC59CtWj9tpD4YjIjlgSiwa8dkIcaIRAwzgBeEgDDoaGBEGAtTh4tGEukMpgnECwzykADucBgnjgUAguSQAG0QAA-cILACkkXIpFoQiMaBcAF0jpzDCYCBg4BlqHQGMCvgZbnqdsZmGl6IxOBBNChSEChAAlPpCMA8zRCADkKP9AG4ADrkJ0ut3AIQbHz0d2kZVCI7e30BvHUpIYEWmkPhyOulVXTSkNPtAMEJJGUv58jhuPZGCJ5UACgGGAmmlNBHwtAAorBu4wAEKFACSklb_rtOnIgv9AEpFwRvJbPK2ADwlstJKWLsPkIRCc010gEa22k0O_SFt2e3xqIQxiYCgDKtCbKfLfsDfTrd4qv6Va6qYBpwABzpFs-QgjlMtAUE-FyeGgvKCk-7rqhApBPm-6AYDA34-hW_pOJIkFRiqRRWDByGoYKAAKPIoJCqbEb-ZFJI0kgoWhngUdB1GETGmGSNhADCAAWEj4P2ZymkR6akVIXGlChYmkHWDYULkQgAIIoCgiAen0BAAGLiUI5JCK2i5WVKz7hseaS6eKpA3E-Aq0AA8jcGpWUIr4wB-TatmAaBQAKB5ObGOkquKKBZARw60J5MC0AxSUwCl_nWUFIX0NuvGMcxcDiv6iWYNleYalK06bLgkm0Euh4xS5KpwJJfJ0XxAW2fZjlHseULpb5DCtrQngTDA0VDUcrVDe1QgUFJMmEdZrYwMZokSdJ5CyfJjB2eSDnADFx5eZlVUpZtF6An2BBnBF02zce83hm1cXLeQ4lQKQAp9cdp3nSNPk3GFEVRYeb0Lce3i0BMnhHq2IOblKIPHpueFVejQ3DcNm47eeADiPITCgQhPVA03ksAlXJaaqYrXt-C08za1HLj-Pc0IhNYWWVM06GLDucLUoISgm5JETXM8wTROU89MDksLDVNWLau0FLMsY9zfMaYr1PK8LsLKghmhi6btDm9r_Oy3LvMK4LxsgLAYC0GLbta9Ldu65jPsaQQpOkOT9t63B1sUESDQqyAKCbNoniFML32_akWC0513XFZ4nN-8NY31njetJBHCHkGH_vYwRle8z1gr56w7Au_XnhCLybCSUIJiTWg4gtNh6TC_n9PVYwtOjylRz5x3ki0JJtOyKEoTT8X-MrX9Apsz9m8wKvDvuQwbM3Pvcs9yhtP55j1cwLXPObmXUcb-n2-_f9e9SuJEgEVAUuPxXV8Cb_2jlYWO8cnSAmTiAVOIpsCv13nnNeDshDeQANKAP9v_O-BMkg32waffG2DNwoClG-dohE7SmjgAQGhUsSH52IaQ8hsVGBUJoQQOhRCSFkO7Cw-0Ox2GcN1lLVuYcpay1mu9IuJhKKqhgOFCYUAVQGRQMGc0oECBNU0DMR4lCbwgFRgAQguN5cSAAVAAmgxfsQgtFQFrpuOxQgsj7VjgwMWDDJI-EkNgzG3ZPyxmkkKdKscphgBEEEDxSD8abn8X3cgaBuyxzOPYXklEU56NoLHWe89yRGBSQREQOTJJPl0GwCAEUwQRWVsoTyklNjkCwCIBCIhIBZKVFE5BvM4lCASUk4W89qoiBoH9TwGTrxZOFgAYmXrM0InS5ZSy8eqIhptJCFF8bzMSZwhAQEkLHWcugG7QNyIUWAYD1RiX2sZBYAAWFAxgU57kAZuFkUolqlgmIwAAcqQIwAUOxdh7H2QcY9aBjknNOQ585-IHilm8hhSQ1kbOEUkOxYdjjaiAA"/><span role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor"><path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><span role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor"><path d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span class="code-box-code-action"><span role="img" aria-label="thunderbolt" class="anticon anticon-thunderbolt code-box-stackblitz"><svg viewBox="64 64 896 896" focusable="false" data-icon="thunderbolt" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7zM378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211L378.2 732.5z"></path></svg></span></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span role="img" aria-label="snippets" tabindex="-1" class="anticon anticon-snippets code-box-code-copy code-box-code-action"><svg viewBox="64 64 896 896" focusable="false" data-icon="snippets" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 112H724V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H500V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H320c-17.7 0-32 14.3-32 32v120h-96c-17.7 0-32 14.3-32 32v632c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32v-96h96c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM664 888H232V336h218v174c0 22.1 17.9 40 40 40h174v338zm0-402H514V336h.2L664 485.8v.2zm128 274h-56V456L544 264H360v-80h68v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h152v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h68v576z"></path></svg></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><a class="code-box-code-action" target="_blank" rel="noreferrer" href="/~demos/components-drawer-demo-extra"><span role="img" class="anticon code-box-separate"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z"></path><path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z"></path></svg></span></a></div><div class="ant-space-item" style="padding-bottom:16px"><div class="code-expand-icon code-box-code-action"><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg" class="code-expand-icon-hide"/></div></div></div></section><section class="highlight-wrapper"><div class="highlight"><div class="ant-tabs ant-tabs-top ant-tabs-centered css-17ju5m3"><div role="tablist" class="ant-tabs-nav"><div class="ant-tabs-nav-wrap"><div class="ant-tabs-nav-list" style="transform:translate(0px, 0px)"><div data-node-key="tsx" class="ant-tabs-tab ant-tabs-tab-active"><div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0">TypeScript</div></div><div data-node-key="jsx" class="ant-tabs-tab"><div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0">JavaScript</div></div><div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div></div></div><div class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"><button type="button" class="ant-tabs-nav-more" style="visibility:hidden;order:1" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="null-more-popup" id="null-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button></div></div><div class="ant-tabs-content-holder"><div class="ant-tabs-content ant-tabs-content-top"><div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"><pre class="language-tsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Drawer<span class="token punctuation">,</span> Radio<span class="token punctuation">,</span> Space <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> type <span class="token punctuation">{</span> DrawerProps <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd/es/drawer'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> type <span class="token punctuation">{</span> RadioChangeEvent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd/es/radio'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token literal-property property">App</span><span class="token operator">:</span> React<span class="token punctuation">.</span><span class="token function-variable function">FC</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>open<span class="token punctuation">,</span> setOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>placement<span class="token punctuation">,</span> setPlacement<span class="token punctuation">]</span> <span class="token operator">=</span> useState<span class="token operator">&lt;</span>DrawerProps<span class="token punctuation">[</span><span class="token string">'placement'</span><span class="token punctuation">]</span><span class="token operator">></span><span class="token punctuation">(</span><span class="token string">'right'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">showDrawer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">e</span><span class="token operator">:</span> RadioChangeEvent</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setPlacement</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">onClose</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Space<span class="token operator">></span>
<span class="token operator">&lt;</span>Radio<span class="token punctuation">.</span>Group value<span class="token operator">=</span><span class="token punctuation">{</span>placement<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span>onChange<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Radio value<span class="token operator">=</span><span class="token string">"top"</span><span class="token operator">></span>top<span class="token operator">&lt;</span><span class="token operator">/</span>Radio<span class="token operator">></span>
<span class="token operator">&lt;</span>Radio value<span class="token operator">=</span><span class="token string">"right"</span><span class="token operator">></span>right<span class="token operator">&lt;</span><span class="token operator">/</span>Radio<span class="token operator">></span>
<span class="token operator">&lt;</span>Radio value<span class="token operator">=</span><span class="token string">"bottom"</span><span class="token operator">></span>bottom<span class="token operator">&lt;</span><span class="token operator">/</span>Radio<span class="token operator">></span>
<span class="token operator">&lt;</span>Radio value<span class="token operator">=</span><span class="token string">"left"</span><span class="token operator">></span>left<span class="token operator">&lt;</span><span class="token operator">/</span>Radio<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Radio<span class="token punctuation">.</span>Group<span class="token operator">></span>
<span class="token operator">&lt;</span>Button type<span class="token operator">=</span><span class="token string">"primary"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>showDrawer<span class="token punctuation">}</span><span class="token operator">></span>
Open
<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Space<span class="token operator">></span>
<span class="token operator">&lt;</span>Drawer
title<span class="token operator">=</span><span class="token string">"Drawer with extra actions"</span>
placement<span class="token operator">=</span><span class="token punctuation">{</span>placement<span class="token punctuation">}</span>
width<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">500</span><span class="token punctuation">}</span>
onClose<span class="token operator">=</span><span class="token punctuation">{</span>onClose<span class="token punctuation">}</span>
open<span class="token operator">=</span><span class="token punctuation">{</span>open<span class="token punctuation">}</span>
extra<span class="token operator">=</span><span class="token punctuation">{</span>
<span class="token operator">&lt;</span>Space<span class="token operator">></span>
<span class="token operator">&lt;</span>Button onClick<span class="token operator">=</span><span class="token punctuation">{</span>onClose<span class="token punctuation">}</span><span class="token operator">></span>Cancel<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span>Button type<span class="token operator">=</span><span class="token string">"primary"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>onClose<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token constant">OK</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Space<span class="token operator">></span>
<span class="token punctuation">}</span>
<span class="token operator">></span>
<span class="token operator">&lt;</span>p<span class="token operator">></span>Some contents<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span>p<span class="token operator">></span>Some contents<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span>p<span class="token operator">></span>Some contents<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Drawer<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</code></pre></div></div></div></div></div></section></section><section class="code-box" id="components-drawer-demo-form-in-drawer"><section class="code-box-demo"><button type="button" class="ant-btn css-17ju5m3 ant-btn-primary"><span class="ant-btn-icon"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></span><span>New account</span></button></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-drawer-demo-form-in-drawer">抽屉表单</a><a href="https://github.com/ant-design/ant-design/edit/master/components/drawer/demo/form-in-drawer.tsx" target="_blank" rel="noopener noreferrer" class="css-le7aoc"><span role="img" aria-label="edit" class="anticon anticon-edit"><svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></span></a></div><div class="code-box-description"><div><p>在抽屉中使用表单。</p></div></div><div class="ant-space css-17ju5m3 ant-space-horizontal ant-space-align-center code-box-actions" style="flex-wrap:wrap;margin-bottom:-16px"><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiIL1GgkjqAWEYFVlAAQBaIWkYATAAIBWAgHYCARhAAaEAFs0ESohC7JMAB7EEGoygZHyGCPGYTakzvKWqNAJxiYm-gHrKABwEAAxh6iDSTiJGcBC45AD0EDTkCPpQaPRwTBrStACeVnBJ3r6cgSHhoZEFxfBlPhi0saSalcFhEV7NrZLtndU9IJ4YIgCurFCV8gDMAEwj5S0icBieECi0GSD-8jUgAL4WMABuACIwVuQ2dg7ILA3rm9uz3QvHGi9bO8y5aE8flGfTWG1-cCEAKBkQARhNoC59CtWj9tpD4YjIjlgSiwa8dkIcaIRAwzgBeEgDDoaGBEGAtTh4tGEukMpgnECwzykADucBgnjgUAguSQAG0QAA-cILACkkXIpFoQiMaBcAF0jpzDCYCBg4BlqHQGMCCPF6CIwKRPJoRLpYp40LzBSJeU6UFZPEJgAAdchCIQoUgWiAURDiWFkKBTGAAbn9gc2uAAFrQI6EUMYEwGhLDlbR2hmsznA7yIJJaCmI8pQqE5aWg-rJLpcDXM8YhMoAGwlxNEkytNAixIR5NpxuwzBYXA8ia3CMAYjAK8nNqMnhEhZQNazUNIIskQkXMAAnGezzmjl8DLc9TtjMw0vRGJwIJpg0ChAAlPpCMA8poQgAOQosBObvp-KrAEIGw-PQ36kMqQhHP-gEgXi1JJBgIqmuB_qQTaKpXJopBoe0IEEEkRikfh5D-nB2QwIhyoABQDBgEyaKaBD4LQACisDcYwABChQAJKSKxwHPjo5CCsBACUikEN4d6eKxAA8JFkUkUqKY2N40aQBAPk-JqvvohFfr-vhqD6QgTAKADKtBMSh5FAaBfR0dZKrAVRuqmAacC-R-REOQACjGcAAPJTCK8lHqhAEUcB0SMLE8AJMkqQUKFEHhV-MEiVMhbkPZADCB72RcTGRakWCCrVToup49kAGI2po9nieQKBTPZiG8vZzkwLALSjegGAwB5qVeU4kh0Qx-XQUIsXbGGAaoeSQhjRNtA5it6QqgAgp6Ea2S0BAdZVQi7axin3VKPr9mkuRCOKpA3PZAq0BtDAavdjkuW59CsWAw4CgZ_pvatUIpnyFytYKwOPc9r25oGf0A-QrG0J4EwwDDuZHEdubvSqFCVVAIazQ9T3ki9fpY1CMD_TcENQ8TjZk7DubeLQEyeAGrH9oGmlSuLgZCJppW0OVRINOSvogCgmzaJ4hSq0I1Mitg5LAHAiO8sjzqCqheXkIbmnRU58XsLoMBHnpRxS6zMtCAAcjAvLiBgNDzrQ0sS0k8vle7nsS2bbUhzLrDsDAKsgJV5T0OIQjyX7mCB4wqtx2WFZVobCgLKERwF7r5A03Tht63TFcezL30MHXNyN1HMv5pIhSuYUsCGzB6CSC25C4CJBZFkIQShChHed0Ig5OoblcS8500wJHC-e3LZUUFXNONXX1e0wKbuVRIM1QJpYd7-QW_bxL4f73rR_APXZ9K1Yyfq--gLa9KVeUdnITFhJoNgQDQ7P3vkAm-69MCb0rvPT2D8o6aS6raIQWRCikCmMnM4gpWAYGHDrFMFZmIwAAI4Im8JIAAsoCLAqDO6aWGkIXAZVBSGx7G7SBstqpQChOga2wBlALF4U3be6DuoEHEvQTQfDPbkDQNxZOyjuL50kY_LIsJxrJy9iomAmjH4L0JrAOAhtxQwW8NQiAtCIwEyJvZbiho8AwAjMBaKPgBSL0YKjJyqN1EwGAihLUiihDMJMbLPqA0VQoCyDNRGUANzJy8WgHxpp_ECm9EEnWelwk3wwZoWR8jIksKSAIspaCBFCIkNw8RVSWFFJKTABRWjt5BOTsLKAxiomex0Xo1WABVTwPSQDhKTBMcxljrFUJoc7BxhMYDOPgHANxHi0kZL8d6bpISjhhPaVHRpC9NIxKmBMmWuR-5J2ADBcslZqwgVrPWPZyC-ky2bBQESMBrTeGTmmWgO4khJF6e8j5I8KCnTAPQTwyd9TtFBWCoMCSYBJJSarTZs1Mk7NGYivp-TDk7ySM0uRrTjmh0qbApIw1jmsL5OwzhsLRHdgkX0zSNS4DCPqay950jbQtLaUizOhjk58nkp4PFUSBlQGTrFXk4rJUmLMfAGZQgbHzMkIspxQgXFrPwBs2A6TZoCgOuIAMYqFKhLeSY8laD9rsmRQgtFXCMWGp8Sah1EhdbysFKrW1LCNqsH3mcYcRNk7GAgGgUgfqAAakbSARqjUIDqEwb6Bq2v6tB6bg2hqTqrbQ0bpQMPaEmgAWojVNSRs0wMJWgpI9qWiZsKTI0lmhbU30pbW9lB5akiLETytlJL5EXM6arIoVhFXaLQLomVqsAAqDRJ3b2VRY4AVi1VzLsQsokSyVmuP1SBTFsFEZ0yJCmWa47glWvCZmte40HXxKdQedFIAj0YBPT4qsF7F2ANrQGzaOaYx5rVpsEN9A_WRVA0xNNAGa1ColtWoQIagM_1AfrCDaHUgwaDXBpFcD72NoKcSltpS-EdoPLS6lfJaVsI4QrLhzKB2P27YIzldTRENIKUO1pI6RWqzQJ6HkBCJXjL_TLaVydzrq1IMJpdpipkqrXbM2x9id3at1esw9brZrvqQp-894hBMyctfs61j9b2ywbXElFzrYWuu8Tpj9F6DMCek7J398HZaIeQ2G1WRBpx-oAFLTiEAw7DGaLkIdg0h3NydCwKOlHOiiAAZCAlbq0WfwwdJtxH-WtvbRUijZGOVco40xkxfLimtt46o1WkgmJzvfEY0TQqJOqzqvQRrGiWtIpXaq9VW7NVqeWTq1ZmnPHaePXp5zs16udaa3sg5YLMsdZgA1bAgoCDfgkPgdbTUJVic9lcgetyhD3KrB455cpXmRfYezSK30JgoGqowOSDH8bJnwJ4RmL0CYJC-wQdAakBJCVNAAQjMyYglYLm15dI12wrUBKM0tgbRxl3CWXtpK-xhYAAWcrzHuOCqRaOkAcRwSwbk53NrIArgsi2lTqOfW123ZZp5pMm7VOOOWbdwMGmD3AXiQ53xMLHKjNVPACnOHgJqFuycC5S33mZbObQAgc7BynXKGqvkq78eOsSc-l1atJvYrF4I8nBIGcgCEND3luWqvw7ZYj5H1HK6w7bXHG-MdBSoJvlvEmfN6LyWMFBCXkMplnU9HGG8QUCBpk0DMR4z5TScGlppMHFxYqVTnQATUivxIQ8ekee6L1gnbycGB-rd-e9UtLuJuWPYCP6XTaBgBEEEKvhzNL17QMK2rIAzj2F5FBHWyfGDJ3OymckRhB8zTdEXFM9ldBsEjVAMEw4k7KF-imTY5AsBblIFaNg5IlSd4qz3vvwGv3cREDQWmInYIWVoMnRcdY3-hDPycpINfJBVM0t3QoWlFsM4IQCsZOWSJ2B_Y7YDYeUeNsIQPHLMPJWlFkKUSmHVXBRgL2UgIwYGDiLiHiPiQSVpU0MSSSaSCA8VJSOMG-VAt3JIAAyJG-IvVBY4bUIAA"/><span role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor"><path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><span role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor"><path d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span class="code-box-code-action"><span role="img" aria-label="thunderbolt" class="anticon anticon-thunderbolt code-box-stackblitz"><svg viewBox="64 64 896 896" focusable="false" data-icon="thunderbolt" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7zM378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211L378.2 732.5z"></path></svg></span></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span role="img" aria-label="snippets" tabindex="-1" class="anticon anticon-snippets code-box-code-copy code-box-code-action"><svg viewBox="64 64 896 896" focusable="false" data-icon="snippets" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 112H724V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H500V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H320c-17.7 0-32 14.3-32 32v120h-96c-17.7 0-32 14.3-32 32v632c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32v-96h96c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM664 888H232V336h218v174c0 22.1 17.9 40 40 40h174v338zm0-402H514V336h.2L664 485.8v.2zm128 274h-56V456L544 264H360v-80h68v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h152v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h68v576z"></path></svg></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><a class="code-box-code-action" target="_blank" rel="noreferrer" href="/~demos/components-drawer-demo-form-in-drawer"><span role="img" class="anticon code-box-separate"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z"></path><path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z"></path></svg></span></a></div><div class="ant-space-item" style="padding-bottom:16px"><div class="code-expand-icon code-box-code-action"><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg" class="code-expand-icon-hide"/></div></div></div></section><section class="highlight-wrapper"><div class="highlight"><div class="ant-tabs ant-tabs-top ant-tabs-centered css-17ju5m3"><div role="tablist" class="ant-tabs-nav"><div class="ant-tabs-nav-wrap"><div class="ant-tabs-nav-list" style="transform:translate(0px, 0px)"><div data-node-key="tsx" class="ant-tabs-tab ant-tabs-tab-active"><div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0">TypeScript</div></div><div data-node-key="jsx" class="ant-tabs-tab"><div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0">JavaScript</div></div><div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div></div></div><div class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"><button type="button" class="ant-tabs-nav-more" style="visibility:hidden;order:1" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="null-more-popup" id="null-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button></div></div><div class="ant-tabs-content-holder"><div class="ant-tabs-content ant-tabs-content-top"><div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"><pre class="language-tsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> PlusOutlined <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@ant-design/icons'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Col<span class="token punctuation">,</span> DatePicker<span class="token punctuation">,</span> Drawer<span class="token punctuation">,</span> Form<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Row<span class="token punctuation">,</span> Select<span class="token punctuation">,</span> Space <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> Option <span class="token punctuation">}</span> <span class="token operator">=</span> Select<span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token literal-property property">App</span><span class="token operator">:</span> React<span class="token punctuation">.</span><span class="token function-variable function">FC</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>open<span class="token punctuation">,</span> setOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">showDrawer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">onClose</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Button type<span class="token operator">=</span><span class="token string">"primary"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>showDrawer<span class="token punctuation">}</span> icon<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">&lt;</span>PlusOutlined <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">}</span><span class="token operator">></span>
New account
<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span>Drawer
title<span class="token operator">=</span><span class="token string">"Create a new account"</span>
width<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">720</span><span class="token punctuation">}</span>
onClose<span class="token operator">=</span><span class="token punctuation">{</span>onClose<span class="token punctuation">}</span>
open<span class="token operator">=</span><span class="token punctuation">{</span>open<span class="token punctuation">}</span>
bodyStyle<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">paddingBottom</span><span class="token operator">:</span> <span class="token number">80</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
extra<span class="token operator">=</span><span class="token punctuation">{</span>
<span class="token operator">&lt;</span>Space<span class="token operator">></span>
<span class="token operator">&lt;</span>Button onClick<span class="token operator">=</span><span class="token punctuation">{</span>onClose<span class="token punctuation">}</span><span class="token operator">></span>Cancel<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span>Button onClick<span class="token operator">=</span><span class="token punctuation">{</span>onClose<span class="token punctuation">}</span> type<span class="token operator">=</span><span class="token string">"primary"</span><span class="token operator">></span>
Submit
<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Space<span class="token operator">></span>
<span class="token punctuation">}</span>
<span class="token operator">></span>
<span class="token operator">&lt;</span>Form layout<span class="token operator">=</span><span class="token string">"vertical"</span> hideRequiredMark<span class="token operator">></span>
<span class="token operator">&lt;</span>Row gutter<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">16</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Item
name<span class="token operator">=</span><span class="token string">"name"</span>
label<span class="token operator">=</span><span class="token string">"Name"</span>
rules<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Please enter user name'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
<span class="token operator">></span>
<span class="token operator">&lt;</span>Input placeholder<span class="token operator">=</span><span class="token string">"Please enter user name"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Item
name<span class="token operator">=</span><span class="token string">"url"</span>
label<span class="token operator">=</span><span class="token string">"Url"</span>
rules<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Please enter url'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
<span class="token operator">></span>
<span class="token operator">&lt;</span>Input
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'100%'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
addonBefore<span class="token operator">=</span><span class="token string">"http://"</span>
addonAfter<span class="token operator">=</span><span class="token string">".com"</span>
placeholder<span class="token operator">=</span><span class="token string">"Please enter url"</span>
<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Row gutter<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">16</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Item
name<span class="token operator">=</span><span class="token string">"owner"</span>
label<span class="token operator">=</span><span class="token string">"Owner"</span>
rules<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Please select an owner'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
<span class="token operator">></span>
<span class="token operator">&lt;</span>Select placeholder<span class="token operator">=</span><span class="token string">"Please select an owner"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Option value<span class="token operator">=</span><span class="token string">"xiao"</span><span class="token operator">></span>Xiaoxiao Fu<span class="token operator">&lt;</span><span class="token operator">/</span>Option<span class="token operator">></span>
<span class="token operator">&lt;</span>Option value<span class="token operator">=</span><span class="token string">"mao"</span><span class="token operator">></span>Maomao Zhou<span class="token operator">&lt;</span><span class="token operator">/</span>Option<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Select<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Item
name<span class="token operator">=</span><span class="token string">"type"</span>
label<span class="token operator">=</span><span class="token string">"Type"</span>
rules<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Please choose the type'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
<span class="token operator">></span>
<span class="token operator">&lt;</span>Select placeholder<span class="token operator">=</span><span class="token string">"Please choose the type"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Option value<span class="token operator">=</span><span class="token string">"private"</span><span class="token operator">></span>Private<span class="token operator">&lt;</span><span class="token operator">/</span>Option<span class="token operator">></span>
<span class="token operator">&lt;</span>Option value<span class="token operator">=</span><span class="token string">"public"</span><span class="token operator">></span>Public<span class="token operator">&lt;</span><span class="token operator">/</span>Option<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Select<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Row gutter<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">16</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Item
name<span class="token operator">=</span><span class="token string">"approver"</span>
label<span class="token operator">=</span><span class="token string">"Approver"</span>
rules<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Please choose the approver'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
<span class="token operator">></span>
<span class="token operator">&lt;</span>Select placeholder<span class="token operator">=</span><span class="token string">"Please choose the approver"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Option value<span class="token operator">=</span><span class="token string">"jack"</span><span class="token operator">></span>Jack Ma<span class="token operator">&lt;</span><span class="token operator">/</span>Option<span class="token operator">></span>
<span class="token operator">&lt;</span>Option value<span class="token operator">=</span><span class="token string">"tom"</span><span class="token operator">></span>Tom Liu<span class="token operator">&lt;</span><span class="token operator">/</span>Option<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Select<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Item
name<span class="token operator">=</span><span class="token string">"dateTime"</span>
label<span class="token operator">=</span><span class="token string">"DateTime"</span>
rules<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Please choose the dateTime'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
<span class="token operator">></span>
<span class="token operator">&lt;</span>DatePicker<span class="token punctuation">.</span>RangePicker
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'100%'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
getPopupContainer<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">trigger</span><span class="token punctuation">)</span> <span class="token operator">=></span> trigger<span class="token punctuation">.</span>parentElement<span class="token operator">!</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Row gutter<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">16</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">24</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Item
name<span class="token operator">=</span><span class="token string">"description"</span>
label<span class="token operator">=</span><span class="token string">"Description"</span>
rules<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'please enter url description'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">}</span>
<span class="token operator">></span>
<span class="token operator">&lt;</span>Input<span class="token punctuation">.</span>TextArea rows<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span> placeholder<span class="token operator">=</span><span class="token string">"please enter url description"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Drawer<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</code></pre></div></div></div></div></div><div class="highlight"><pre><code class="css"><span class="token selector">.site-form-in-drawer-wrapper</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">right</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
<span class="token property">bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 10px 16px<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token property">border-top</span><span class="token punctuation">:</span> 1px solid #e9e9e9<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-drawer-demo-multi-level-drawer"><section class="code-box-demo"><button type="button" class="ant-btn css-17ju5m3 ant-btn-primary"><span>Open drawer</span></button></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-drawer-demo-multi-level-drawer">多层抽屉</a><a href="https://github.com/ant-design/ant-design/edit/master/components/drawer/demo/multi-level-drawer.tsx" target="_blank" rel="noopener noreferrer" class="css-le7aoc"><span role="img" aria-label="edit" class="anticon anticon-edit"><svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></span></a></div><div class="code-box-description"><div><p>在抽屉内打开新的抽屉，用以解决多分支任务的复杂状况。</p></div></div><div class="ant-space css-17ju5m3 ant-space-horizontal ant-space-align-center code-box-actions" style="flex-wrap:wrap;margin-bottom:-16px"><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiIFiagQjqC9RoEkdAAQBaIWkYATAAIBWAgHYCARhAAaEAFs0ESohC7JMAB7EEGoygZHyGCPGYTakzvKWqNAJxiYm-gHrKABwEAAxh6iDSTiJGcBC45AD0EDTkCPpQaPRwTBrStACeVnBJ3r6cgSHhoZEFxfBlPhi0saSalcFhEV7NrZLtndU9IJ4YIgCurFCV8gDMAEwj5S0icBieECi0GSD-8jUgAL4WMABuACIwVuQ2dg7ILA3rm9uz3QvHGi9bO8y5aE8flGfTWG1-cCEAKBkQARhNoC59CtWj9tpD4YjIjlgSiwa8dkIcaIRAwzgBeEgDDoaGBEGAtTh4tGEukMpgnECwzykADucBgnjgUAguSQAG0QAA-cILACkkXIpFoQiMaBcAF0jpzDCYCBg4BlqHQGMCvgZbnqdsZmGl6IxOBBNChSEChAAlPpCMA8zRCADkKP9AG4ADrkJ0ut3AIQbHz0d2kZVCI7e30BvHUpIYEWmkPhyOulVXTSkNPtAMEJJGUv58jhuPZGCJ5UACgGGAmmlNBHwtAAorBu4wAEKFACSklb_rtOnIgv9AEpFwRvJbPK2ADwlstJKWLsPkIRCc010gEa22k0O_SFt2e3xqIQxiYCgDKtCbKfLfsDfTrd4qv6Va6qYBpwABzpFs-QgjlMtAUE-FyeGgvKCt-PoVv6TiSHWDYULkQgAIIoCgiAen0BAAGIAMJCOSQitou9FSs-4bHmkhHiqQNxPgKtAAPI3Bq9FCK-MAfk2rZgGgUACge7GxgRKrihgAAWiJrshqGCnxMC0DRGlQJIWkoWhngiQx4mSfQ0myfJh6KZxKpwGpfLaeZolMSxbFHseUL6UJDCtrQngTDACl-Ucjl-c5QgUDRUCkAKXnMeSrHAIpx78UF5B2XJEWHse0Xhk5ylQm5vKGZpDAeehDHeelvn-QFBlGSZtVmYKIVhYViklfWsXlQl7WmTpniJclMCpT5mV-dl-nVcZY3mflDn9TFx7eLQEyeEerZZUIm5Sodx6bnBtAIUeRRWOSoYgCgmzaJ4hT3fF5CJakWDksArnuV1nhHCd80tUIuWqgDp1HUkF1XcDoNHXVnhEmwsB3SAACyExQKwIiwGcMBQBD41vbyECSLQak_bICyhKmObJWgsJo8AMkFamCVJQKP2c1NHM3DzNxA1DZ2wxQRINOjj1OoCr0gO9n3YD9f1VaNnXjcLIMIwAKrypB4-chPE-ZIvQ2L5DwwjiOQ1roOsOwMDo7r-v40bSP3abx5kxTVPAIsdOe7GXNMyzbMCkcge89zwAjTV5BI5N4eRwLwDqXHSMR7bx6W1bQjaxpkKikSesGwTRMmSTWfQ0jOf-ZuSQ14d9eW5FA3hiYUYqkYMnYyqJEoMG5qgQQam0JoMyPHapqcE3ACEFwCTR2sAJoAAr9kIo_j7XZ1b0TWTkLg6MMPdO912pPiSGfLWbt2n6xmpgL8ejUxgCIQSn4Ht_6WgQjkGg3Z0ZnHsLyTub0p6MHRt7Sm5IjDAIwDAEQ0C1JPl0GwCAskwSyUdsoPialNjkCwCIBCIhIC0HJEqT-Vczp31_v_QB91KYwG7CIGgSVPDgOvOQ-6ABiUI_CBFUNzvXC-6pr5HVhKQSQhRxFnUkBAM4Qhybo1nLoQUb1ciFDRvddAkh5GH3IgsAALCgYwb09xfxZFKOKpYJiMAAHJSOmgxDsXYex9kHMw00Y5JzTlUfOTwS5gz1ysabeukjpFnxEWPKAtdjjaiAA"/><span role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor"><path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><span role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor"><path d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span class="code-box-code-action"><span role="img" aria-label="thunderbolt" class="anticon anticon-thunderbolt code-box-stackblitz"><svg viewBox="64 64 896 896" focusable="false" data-icon="thunderbolt" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7zM378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211L378.2 732.5z"></path></svg></span></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span role="img" aria-label="snippets" tabindex="-1" class="anticon anticon-snippets code-box-code-copy code-box-code-action"><svg viewBox="64 64 896 896" focusable="false" data-icon="snippets" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 112H724V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H500V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H320c-17.7 0-32 14.3-32 32v120h-96c-17.7 0-32 14.3-32 32v632c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32v-96h96c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM664 888H232V336h218v174c0 22.1 17.9 40 40 40h174v338zm0-402H514V336h.2L664 485.8v.2zm128 274h-56V456L544 264H360v-80h68v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h152v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h68v576z"></path></svg></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><a class="code-box-code-action" target="_blank" rel="noreferrer" href="/~demos/components-drawer-demo-multi-level-drawer"><span role="img" class="anticon code-box-separate"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z"></path><path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z"></path></svg></span></a></div><div class="ant-space-item" style="padding-bottom:16px"><div class="code-expand-icon code-box-code-action"><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg" class="code-expand-icon-hide"/></div></div></div></section><section class="highlight-wrapper"><div class="highlight"><div class="ant-tabs ant-tabs-top ant-tabs-centered css-17ju5m3"><div role="tablist" class="ant-tabs-nav"><div class="ant-tabs-nav-wrap"><div class="ant-tabs-nav-list" style="transform:translate(0px, 0px)"><div data-node-key="tsx" class="ant-tabs-tab ant-tabs-tab-active"><div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0">TypeScript</div></div><div data-node-key="jsx" class="ant-tabs-tab"><div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0">JavaScript</div></div><div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div></div></div><div class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"><button type="button" class="ant-tabs-nav-more" style="visibility:hidden;order:1" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="null-more-popup" id="null-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button></div></div><div class="ant-tabs-content-holder"><div class="ant-tabs-content ant-tabs-content-top"><div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"><pre class="language-tsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Drawer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token literal-property property">App</span><span class="token operator">:</span> React<span class="token punctuation">.</span><span class="token function-variable function">FC</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>open<span class="token punctuation">,</span> setOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>childrenDrawer<span class="token punctuation">,</span> setChildrenDrawer<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">showDrawer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">onClose</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">showChildrenDrawer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setChildrenDrawer</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">onChildrenDrawerClose</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setChildrenDrawer</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Button type<span class="token operator">=</span><span class="token string">"primary"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>showDrawer<span class="token punctuation">}</span><span class="token operator">></span>
Open drawer
<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span>Drawer title<span class="token operator">=</span><span class="token string">"Multi-level drawer"</span> width<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">520</span><span class="token punctuation">}</span> closable<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span> onClose<span class="token operator">=</span><span class="token punctuation">{</span>onClose<span class="token punctuation">}</span> open<span class="token operator">=</span><span class="token punctuation">{</span>open<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Button type<span class="token operator">=</span><span class="token string">"primary"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>showChildrenDrawer<span class="token punctuation">}</span><span class="token operator">></span>
Two<span class="token operator">-</span>level drawer
<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span>Drawer
title<span class="token operator">=</span><span class="token string">"Two-level Drawer"</span>
width<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">320</span><span class="token punctuation">}</span>
closable<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
onClose<span class="token operator">=</span><span class="token punctuation">{</span>onChildrenDrawerClose<span class="token punctuation">}</span>
open<span class="token operator">=</span><span class="token punctuation">{</span>childrenDrawer<span class="token punctuation">}</span>
<span class="token operator">></span>
This is two<span class="token operator">-</span>level drawer
<span class="token operator">&lt;</span><span class="token operator">/</span>Drawer<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Drawer<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</code></pre></div></div></div></div></div></section></section></section><section style="flex:1;padding:8px;width:0"><section class="code-box" id="components-drawer-demo-placement"><section class="code-box-demo"><div class="ant-space css-17ju5m3 ant-space-horizontal ant-space-align-center"><div class="ant-space-item" style="margin-right:8px"><div class="ant-radio-group ant-radio-group-outline css-17ju5m3"><label class="ant-radio-wrapper css-17ju5m3"><span class="ant-radio"><input class="ant-radio-input" type="radio" value="top"/><span class="ant-radio-inner"></span></span><span>top</span></label><label class="ant-radio-wrapper css-17ju5m3"><span class="ant-radio"><input class="ant-radio-input" type="radio" value="right"/><span class="ant-radio-inner"></span></span><span>right</span></label><label class="ant-radio-wrapper css-17ju5m3"><span class="ant-radio"><input class="ant-radio-input" type="radio" value="bottom"/><span class="ant-radio-inner"></span></span><span>bottom</span></label><label class="ant-radio-wrapper ant-radio-wrapper-checked css-17ju5m3"><span class="ant-radio ant-radio-checked"><input class="ant-radio-input" type="radio" checked="" value="left"/><span class="ant-radio-inner"></span></span><span>left</span></label></div></div><div class="ant-space-item"><button type="button" class="ant-btn css-17ju5m3 ant-btn-primary"><span>Open</span></button></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-drawer-demo-placement">自定义位置</a><a href="https://github.com/ant-design/ant-design/edit/master/components/drawer/demo/placement.tsx" target="_blank" rel="noopener noreferrer" class="css-le7aoc"><span role="img" aria-label="edit" class="anticon anticon-edit"><svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></span></a></div><div class="code-box-description"><div><p>自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭。</p></div></div><div class="ant-space css-17ju5m3 ant-space-horizontal ant-space-align-center code-box-actions" style="flex-wrap:wrap;margin-bottom:-16px"><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiIFeBgWdqCScoFl5QHb-AAgC0ItIwAmAAQCsBAOwEAjCAA0IALZoIlRCH3SYAD2IItJlAxPkMEeMym1pnRSvVaATjExNDAD1VAA4CAAYIzRBZFzETOAhccgB6CBpyBEMoNHo4Ji1ZWgBPGzgU339OYLDI8Oii0vgKvwxaeNJtatCIqJ9W9ulO7tq-kG8MMQBXVihqxQBmACYxyraxOAxvCBRaLJBAxTqQAF8rGAA3ABEYG3I7BydkFibN7d353qXTrTedveY-TQ3gC4wGGy2_zgIiBIOiACMptA3IY1u0_rtoYjkdE8qC0RD3nsRHjxGIGBcALwkIZdLQwIgwNqcAkY4kMplMM4geHeUgAdzgMG8cCgEHySAA2iAAHyRJYAUmi5FItBEJjQbgAuiducYzAQMHAstQ6AxQT8jPcDXtTMwMvRGJwINoUKQQSIAEoDERgPnaEQAcjRgYA3AAdcgut0e4AiLZ-eie0iqkQnX3-oME2kpDBi81hyPR91qm7aUgZzpBggpEzlwvkSMJ3IwZOqgAUQwwU205oI-FoAFFYL3GAAhYoASWk7cDDr05GFgYAlMuCL5rd52wAeMsVlIy5cR8giESWuukAi2-1mp2GYse73-DQiONTIUAZVoLbTlYDwYGBsHzVQMa31cwjTgIDXRLEkmlfEQrm8NB-WFAAFPkUDgF9PU1CBSAAYQACykfBBwuc1fz9KtAxcaRoJjNU4zHGZaAoF8kJQ4UcLw0gXw_dAMBgKjM1omQGybCh8hEABBFAUEQL0BgIAAxAiREpER22XDSZVfSNTwyaTJVIO4XyFWgAHk7i1DSRHfGAvxbdswDQKAhSPAz4yktVJRQHIhNHWhzJgWg0ICmAgtszSHKc-hd2Q1DvAw0y4ElQN_MwSKCy1GVZ1gMBaBXY8vKMtU4CIgVOKSuztN0_ST1PGFQushh21obwphgTzGpOErGrKkQKAIqBSCFWqdMpPTgC808LNa8gXLcjzj1PPrI1KnyhvIYjSOEzT2xgRTcOkfDdvIMiKMYSbptm5qwoioLDqvYEBwIC43K6nq1v609fFoKZvBPds7u3GU7tPbcBKy8HGqaprtxO_CCAAcT5KYUBED6oC6ylgEywLzXTYaSIumA8ZJvaTlh-HaZERHeKxz7yfDFhTNZmU2JQbcUiR0gabphG-aZnGWfGJIiNoDntlwSWeb5gXBfp4Xsdx1n4VVNjtA5jXaC1-XeMVwWGdOitVbFgqpdlS2DdNo34dt5G0dIDH7YRli9YoOCbEpVmUG2XRvGKVntpG9IsDxiqqsS4VqYh2mFvjyGUg9tjyDdnnoaEjPquFJOSTYWBfZAMc0ESDBEJj7xWfzgnssYPG66Ck587zMa0HhIvgFc9yYBbuHaeG0ahQpnbh77_PTIYCm7n7pWsBgYpG8eon47dyGUBlD9OmEh1zTgAhD55zf8-3Tft97bzGH3w-CGP9f6fPner8dPZb_v-Oedz7wjZ5gWevWo2RcphGLqhgK5KYUA1RyRQKGS04ECCS20HMZ4e87wgFBgAQiuJZAiAAVAAmmhQcIgkFQAzmQkQOQLrFwYBzU-RE_DSAfpDXs354wkRFKFYuMwwBiBCPQgedNtxsLQCIcgaBezFwuI4fkjEQ5oNoMXfkEBpC0CIpSEwMihJiBUWooiL59BsAgG5CEblyaqHMkRbY5AsBiDYmISASiVSCKVqw0KYiJFSNZuo7KYgaCjWriAF-5pi4AGJwiRKia442KRGGagftuDW0higsPpqdC4IhVHF3nPoPOwT8jFCLn7TUp0LqKSWAAFhQKYEOB586QzZDKQa5YpiMAAHKkBMHZLsPY-wDmHPXWgE5pyzlyYubwxUeZNNPikZJqTP5xNoMgo2pxdRAA"/><span role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor"><path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><span role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor"><path d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span class="code-box-code-action"><span role="img" aria-label="thunderbolt" class="anticon anticon-thunderbolt code-box-stackblitz"><svg viewBox="64 64 896 896" focusable="false" data-icon="thunderbolt" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7zM378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211L378.2 732.5z"></path></svg></span></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span role="img" aria-label="snippets" tabindex="-1" class="anticon anticon-snippets code-box-code-copy code-box-code-action"><svg viewBox="64 64 896 896" focusable="false" data-icon="snippets" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 112H724V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H500V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H320c-17.7 0-32 14.3-32 32v120h-96c-17.7 0-32 14.3-32 32v632c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32v-96h96c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM664 888H232V336h218v174c0 22.1 17.9 40 40 40h174v338zm0-402H514V336h.2L664 485.8v.2zm128 274h-56V456L544 264H360v-80h68v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h152v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h68v576z"></path></svg></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><a class="code-box-code-action" target="_blank" rel="noreferrer" href="/~demos/components-drawer-demo-placement"><span role="img" class="anticon code-box-separate"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z"></path><path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z"></path></svg></span></a></div><div class="ant-space-item" style="padding-bottom:16px"><div class="code-expand-icon code-box-code-action"><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg" class="code-expand-icon-hide"/></div></div></div></section><section class="highlight-wrapper"><div class="highlight"><div class="ant-tabs ant-tabs-top ant-tabs-centered css-17ju5m3"><div role="tablist" class="ant-tabs-nav"><div class="ant-tabs-nav-wrap"><div class="ant-tabs-nav-list" style="transform:translate(0px, 0px)"><div data-node-key="tsx" class="ant-tabs-tab ant-tabs-tab-active"><div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0">TypeScript</div></div><div data-node-key="jsx" class="ant-tabs-tab"><div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0">JavaScript</div></div><div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div></div></div><div class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"><button type="button" class="ant-tabs-nav-more" style="visibility:hidden;order:1" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="null-more-popup" id="null-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button></div></div><div class="ant-tabs-content-holder"><div class="ant-tabs-content ant-tabs-content-top"><div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"><pre class="language-tsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> type <span class="token punctuation">{</span> DrawerProps<span class="token punctuation">,</span> RadioChangeEvent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Drawer<span class="token punctuation">,</span> Radio<span class="token punctuation">,</span> Space <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token literal-property property">App</span><span class="token operator">:</span> React<span class="token punctuation">.</span><span class="token function-variable function">FC</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>open<span class="token punctuation">,</span> setOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>placement<span class="token punctuation">,</span> setPlacement<span class="token punctuation">]</span> <span class="token operator">=</span> useState<span class="token operator">&lt;</span>DrawerProps<span class="token punctuation">[</span><span class="token string">'placement'</span><span class="token punctuation">]</span><span class="token operator">></span><span class="token punctuation">(</span><span class="token string">'left'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">showDrawer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">onClose</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">e</span><span class="token operator">:</span> RadioChangeEvent</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setPlacement</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Space<span class="token operator">></span>
<span class="token operator">&lt;</span>Radio<span class="token punctuation">.</span>Group value<span class="token operator">=</span><span class="token punctuation">{</span>placement<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span>onChange<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Radio value<span class="token operator">=</span><span class="token string">"top"</span><span class="token operator">></span>top<span class="token operator">&lt;</span><span class="token operator">/</span>Radio<span class="token operator">></span>
<span class="token operator">&lt;</span>Radio value<span class="token operator">=</span><span class="token string">"right"</span><span class="token operator">></span>right<span class="token operator">&lt;</span><span class="token operator">/</span>Radio<span class="token operator">></span>
<span class="token operator">&lt;</span>Radio value<span class="token operator">=</span><span class="token string">"bottom"</span><span class="token operator">></span>bottom<span class="token operator">&lt;</span><span class="token operator">/</span>Radio<span class="token operator">></span>
<span class="token operator">&lt;</span>Radio value<span class="token operator">=</span><span class="token string">"left"</span><span class="token operator">></span>left<span class="token operator">&lt;</span><span class="token operator">/</span>Radio<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Radio<span class="token punctuation">.</span>Group<span class="token operator">></span>
<span class="token operator">&lt;</span>Button type<span class="token operator">=</span><span class="token string">"primary"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>showDrawer<span class="token punctuation">}</span><span class="token operator">></span>
Open
<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Space<span class="token operator">></span>
<span class="token operator">&lt;</span>Drawer
title<span class="token operator">=</span><span class="token string">"Basic Drawer"</span>
placement<span class="token operator">=</span><span class="token punctuation">{</span>placement<span class="token punctuation">}</span>
closable<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
onClose<span class="token operator">=</span><span class="token punctuation">{</span>onClose<span class="token punctuation">}</span>
open<span class="token operator">=</span><span class="token punctuation">{</span>open<span class="token punctuation">}</span>
key<span class="token operator">=</span><span class="token punctuation">{</span>placement<span class="token punctuation">}</span>
<span class="token operator">></span>
<span class="token operator">&lt;</span>p<span class="token operator">></span>Some contents<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span>p<span class="token operator">></span>Some contents<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span>p<span class="token operator">></span>Some contents<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Drawer<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</code></pre></div></div></div></div></div></section></section><section class="code-box" id="components-drawer-demo-render-in-current"><section class="code-box-demo"><div style="position:relative;height:200px;padding:48px;overflow:hidden;text-align:center;background:rgba(0, 0, 0, 0.02);border:1px solid #f0f0f0;border-radius:8px">Render in this<div style="margin-top:16px"><button type="button" class="ant-btn css-17ju5m3 ant-btn-primary"><span>Open</span></button></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-drawer-demo-render-in-current">渲染在当前 DOM</a><a href="https://github.com/ant-design/ant-design/edit/master/components/drawer/demo/render-in-current.tsx" target="_blank" rel="noopener noreferrer" class="css-le7aoc"><span role="img" aria-label="edit" class="anticon anticon-edit"><svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></span></a></div><div class="code-box-description"><div><p>渲染在当前 dom 里。自定义容器，查看 <code>getContainer</code>。</p>
<blockquote>
<p>注意：在 v5 中 <code>style</code> 与 <code>className</code> 迁移至 Drawer 面板上与 Modal 保持一致，原 <code>style</code> 与 <code>className</code> 替换为 <code>rootStyle</code> 与 <code>rootClassName</code>。</p>
</blockquote></div></div><div class="ant-space css-17ju5m3 ant-space-horizontal ant-space-align-center code-box-actions" style="flex-wrap:wrap;margin-bottom:-16px"><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiIEx2gy-aAU6oGV9QLJKAAgAiAeQCyIgLQi0jACYABAKwEA7AQCMIADQgAtmgiVEIM0pgAPYgkPWUDa-QwR4zRbSWcN2vUMAJxhMJgsAPR0ADgIABniDEBVvWWs4CFxyAHoIGnIECyg0ejgmQxVaAE9nOGyQsM4o2IS4pMqa-HrQjFo00iMmmPjE4J6-pQGhltGQIIxZAFdWKCaNAGYAJlmG3tk4DCCIFFpCkAiNVpAAX0cYADcxGGdyV3dPZBZOg6OTtZHNjdDD9jqdmGU0EFwnNxvtDqC4CIIVCkgAjRbQXwWXZ9EEnRHozFJUrQnFw36nEQkuSyBj3AC8JEmg0MMCIMF6nDJeMpbI5TFuIFRQVIAHc4DAgnAoBAykgANogAB8CU2AFIkuRSLQRNY0L4ALrXQVWWwEDBwQrUOgMaFAyyvM2nGzMfL0RicCBGFCkKEiABK4xEYBFRhEAHIceGANwAHXIXp9fuAIkOoXo_tI2pE12DoYjZOZ2QwMttMfjid9OqeRlIeYGEYI2WstfL5HjaZKMEz2oAFJMMIsjLaCPhaABRWDDxgAISqAEklL3w27TORJeGAJSbgghR1BXsAHhrdeySs3cfIIhE9pbpAIztdNo9FkrfsDYX0IhTiwlAGVaC7HN6zDSNxjbN8dXDJtTTsC04Ag70q2_EQZ2WWgKC_MQgjQUVJS_WgAAsYGHYCQwbcNvCUNsOwoMoRAAQRQFBEADcYCAAMQAYREekRF7TdeKVb942vfJ6JTDCsAYYC-KIkjCF_GAABVSGk8gBMvMS6J1eVSBeL8JVoCQXgNXiRCUgCu17MA0CgCUL3jUTUx0pFCLFbDcMlcyBKEkSr2vJEYGMl5e1oIJFhgRyAuuS9nPEnUKC4qBSAlHzBPpYTgGc68jJMhgbLshytJzOKAoSlzGDXSUAKqWBWI_XoCC4v8_wABRFZwoQ8RE-OygLrx9DJWAoViwOKVh7hgcN9BykRiMyQjaFYzY4jiWaBpEdAlCUMxcFYgAWaINsCkRSCmoIwBS0UxsIiAdoYGa5voGxaAYmUsjGjBbQ3E7AtRTAsFwEVFleVipIYc1SBSoIOOgKB3voII_uvVFfWsIJWIAAx0FAbCRaH7pEAASYAIfIKGYZndGao5CglEhKprixlGRDRoIMf9fUIF_cG1Mh9nOe538ABkAHE_tipyApCWhFiCK9ezmw9dvuJFqlgelgFXMwao1mBriVObr0DfcRDMKk7rgY2RBViA1bKOqYC1lMTCCXAzFUliRB0AA2HNDZt69DzQ2gMKvapnHpWMQBQI43aqGOzvIZK8iwLW4Hc0VPLwoJA8207r3y9sC8Cw9slD8OjdL8vVerwvbZzyUg6pNhNZjmc0AyDBxBw3OY5blBim-6daGjuZFtoAfS7ElK4DQVFNeAWz7INlukrn53gA31K15ns6Xi1_SGGuFuxy4uhqqCLWV4lU_S_rhvbZQJU_wGGBKvdU4CB_8uX5t8uTcgiP2Ds2e2j9opSxLrYJMOprC2UWFAHUTEUDRntLBAgS0jCrE-G6W0nBlYAEJJBcWUgATTauOeatBsEgLLlgqAIhijkFwOPBgMc6GnUPMRfUnDC6HmHIBVMhFIRGXHssMAshogcJbsHQRaARDkDQMOce9wPCilgUnPBjBx6inukRek1g1HfVkHopQREvxmDYBAOycI7LOx0IZQiRxyBYFkBhWQkAx5ahkfvORwUFFKJUTHeSw5ZA0Bhlo58Y8Y4AGI1oJLiL4p-ttsg8KUHw4OaMlBVEyWXVW5slDjx1uuIISdHbt1jvqXaLCVoHTxknM8sjbY8iVBVWsoNaAADlSDWHMgOIcI4xyTgUrOBcS4VyX11kELc0Zy6tJbuXbJuSAFpJoVAOhNxjRAA"/><span role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor"><path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><span role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor"><path d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span class="code-box-code-action"><span role="img" aria-label="thunderbolt" class="anticon anticon-thunderbolt code-box-stackblitz"><svg viewBox="64 64 896 896" focusable="false" data-icon="thunderbolt" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7zM378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211L378.2 732.5z"></path></svg></span></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span role="img" aria-label="snippets" tabindex="-1" class="anticon anticon-snippets code-box-code-copy code-box-code-action"><svg viewBox="64 64 896 896" focusable="false" data-icon="snippets" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 112H724V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H500V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H320c-17.7 0-32 14.3-32 32v120h-96c-17.7 0-32 14.3-32 32v632c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32v-96h96c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM664 888H232V336h218v174c0 22.1 17.9 40 40 40h174v338zm0-402H514V336h.2L664 485.8v.2zm128 274h-56V456L544 264H360v-80h68v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h152v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h68v576z"></path></svg></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><a class="code-box-code-action" target="_blank" rel="noreferrer" href="/~demos/components-drawer-demo-render-in-current"><span role="img" class="anticon code-box-separate"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z"></path><path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z"></path></svg></span></a></div><div class="ant-space-item" style="padding-bottom:16px"><div class="code-expand-icon code-box-code-action"><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg" class="code-expand-icon-hide"/></div></div></div></section><section class="highlight-wrapper"><div class="highlight"><div class="ant-tabs ant-tabs-top ant-tabs-centered css-17ju5m3"><div role="tablist" class="ant-tabs-nav"><div class="ant-tabs-nav-wrap"><div class="ant-tabs-nav-list" style="transform:translate(0px, 0px)"><div data-node-key="tsx" class="ant-tabs-tab ant-tabs-tab-active"><div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0">TypeScript</div></div><div data-node-key="jsx" class="ant-tabs-tab"><div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0">JavaScript</div></div><div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div></div></div><div class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"><button type="button" class="ant-tabs-nav-more" style="visibility:hidden;order:1" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="null-more-popup" id="null-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button></div></div><div class="ant-tabs-content-holder"><div class="ant-tabs-content ant-tabs-content-top"><div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"><pre class="language-tsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Drawer<span class="token punctuation">,</span> theme <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token literal-property property">App</span><span class="token operator">:</span> React<span class="token punctuation">.</span><span class="token function-variable function">FC</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> token <span class="token punctuation">}</span> <span class="token operator">=</span> theme<span class="token punctuation">.</span><span class="token function">useToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>open<span class="token punctuation">,</span> setOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">showDrawer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">onClose</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token literal-property property">containerStyle</span><span class="token operator">:</span> React<span class="token punctuation">.</span>CSSProperties <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">position</span><span class="token operator">:</span> <span class="token string">'relative'</span><span class="token punctuation">,</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">48</span><span class="token punctuation">,</span>
<span class="token literal-property property">overflow</span><span class="token operator">:</span> <span class="token string">'hidden'</span><span class="token punctuation">,</span>
<span class="token literal-property property">textAlign</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
<span class="token literal-property property">background</span><span class="token operator">:</span> token<span class="token punctuation">.</span>colorFillAlter<span class="token punctuation">,</span>
<span class="token literal-property property">border</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">1px solid </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>token<span class="token punctuation">.</span>colorBorderSecondary<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
<span class="token literal-property property">borderRadius</span><span class="token operator">:</span> token<span class="token punctuation">.</span>borderRadiusLG<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>div style<span class="token operator">=</span><span class="token punctuation">{</span>containerStyle<span class="token punctuation">}</span><span class="token operator">></span>
Render <span class="token keyword">in</span> <span class="token keyword">this</span>
<span class="token operator">&lt;</span>div style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">marginTop</span><span class="token operator">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Button type<span class="token operator">=</span><span class="token string">"primary"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>showDrawer<span class="token punctuation">}</span><span class="token operator">></span>
Open
<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>Drawer
title<span class="token operator">=</span><span class="token string">"Basic Drawer"</span>
placement<span class="token operator">=</span><span class="token string">"right"</span>
closable<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
onClose<span class="token operator">=</span><span class="token punctuation">{</span>onClose<span class="token punctuation">}</span>
open<span class="token operator">=</span><span class="token punctuation">{</span>open<span class="token punctuation">}</span>
getContainer<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
<span class="token operator">></span>
<span class="token operator">&lt;</span>p<span class="token operator">></span>Some contents<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Drawer<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</code></pre></div></div></div></div></div></section></section><section class="code-box" id="components-drawer-demo-user-profile"><section class="code-box-demo"><div class="ant-list ant-list-split ant-list-bordered css-17ju5m3"><div class="ant-spin-nested-loading css-17ju5m3"><div class="ant-spin-container"><ul class="ant-list-items"><li class="ant-list-item"><div class="ant-list-item-meta"><div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image css-17ju5m3"><img src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"/></span></div><div class="ant-list-item-meta-content"><h4 class="ant-list-item-meta-title"><a href="https://ant.design/index-cn">Lily</a></h4><div class="ant-list-item-meta-description">Progresser XTech</div></div></div><ul class="ant-list-item-action"><li><a>View Profile</a></li></ul></li><li class="ant-list-item"><div class="ant-list-item-meta"><div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image css-17ju5m3"><img src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"/></span></div><div class="ant-list-item-meta-content"><h4 class="ant-list-item-meta-title"><a href="https://ant.design/index-cn">Lily</a></h4><div class="ant-list-item-meta-description">Progresser XTech</div></div></div><ul class="ant-list-item-action"><li><a>View Profile</a></li></ul></li></ul></div></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-drawer-demo-user-profile">信息预览抽屉</a><a href="https://github.com/ant-design/ant-design/edit/master/components/drawer/demo/user-profile.tsx" target="_blank" rel="noopener noreferrer" class="css-le7aoc"><span role="img" aria-label="edit" class="anticon anticon-edit"><svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></span></a></div><div class="code-box-description"><div><p>需要快速预览对象概要时使用，点击遮罩区关闭。</p></div></div><div class="ant-space css-17ju5m3 ant-space-horizontal ant-space-align-center code-box-actions" style="flex-wrap:wrap;margin-bottom:-16px"><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiIIfyg9gaAhGYAnIwL1GgSR0ABAFoxaRgBMAAgFYCAdgIBGEABoQAWzQRKiEIdkwAHsQQ6zKBmfIYI8ZjNqzOytZp0AnGJhMxgB66gAcBAAMUdog8m4SZnAQuOQA9BA05AjGUGj0cEw68rQAnnZwaf6BnKER0ZGxJeXwVQEYtImkurXhUTF-7Z2y3b31AyC-GBIArqxQtcoAzABME9UdEnAYvhAotDkgwcoNIAC-NjAAbgAiMHbkDk4uyCwt27v7i_0r5zofewOzEKaF8QUmQy2O0BcDEILBsQARjNoB5jBtOgD9rDkajYgVwRioZ8DmICZIJAwrgBeEgjHo6GBEGAdThErGkpkspgXECI3ykADucBgvjgUAghSQAG0QAA-aIrACksXIpFoYjMaA8AF0zrzTBYCBg4DlqHQGOCCMl6Il4ND9hAKBI2DBdBIUALILAJILfGgUHZfGJgAAdchiMT6Xy4QwSRHq2jdRBiFQocwAbnDkZoUFIvhTMcRaAAFJEtGJy5WK9EAGyKACUWYjYjAdC2EAAXjAU-oACzp5uRiXkGASAAWMBS49ovYIihU6kUzbO4fDBASsn9gtF8dIslKYhQ1tddo5TvILvo7s9pG9Y5QIezmslKDypRTiLz2CHUdBscvBNaCTXRe1rQdn1zfNC1wYsyxrBDKwIMJG1_NtGA7bswIglsRzHSdp1nMR1HnRdl3DVdyHXG0xySB1WGdV0by9aAHwkPJERgKAnxbWRX3fFNDDw-NvywX9owAiRdlwGcUzCHCc1IPMCzEItSyrDSa2Q1CKL-ExHiNA5zGYLJ6EYTgIF0FB8w1AAlIZWwFXQxAAcgxFzm0s6ywRDMQdgCehbNIdUxDORzulcol6TSDAJUtDzwy8myxDuXRSHC5yXIINIzDShKqMcapAuC2gSxGDAZl0S0CHwWgAFFYCqxgACFSgASVkEsXNMgxR18FyGwbAh_AM3wSwAHlS9K0jlJtnz03LSAIIyTItczjCSnz7MCCtgDEGYRQAZVofIYFCjLIqGfLNo1LKMgMywTTga6rOSvaAEErnyUEKwAYSUisbggK4IDMXxAe3UUKwAGUlWgKyCwVzrAJzXLcWR8sSxhRTATAzruc8KDa68AAUBRQWEwxbVh2B7OFaF2chcF_UzLRTbaOgIDnaAAOX3GAVzXRwKEKFL7RJC9ibdMRqTEEs9pp2AK1ZxhQpTAn6Ml0nybgBsZblOXn3Gvirj8vJTR5tAqupUMQBos9NcY68PRYn0_QDINbblZ9I3Gx9YrQC2rZgG27dPOiJadt0XbvViPXYtBOKgL3gEVmAzkQca0hQb2W0jYAVdoSjfZy4Hc7mgqslF97A3ZoYCAAMV-mW5b16kDapxTsg1aVSAeCsRVoAB5B4dRbg6YGO06S1xqARQryCRY1OBxyFG5IeDWWSzbjufbhGBh4eEsGZmGAK8jM5m0X7uxAoX68xFFvt_1njI0jQeR4YGe0Dns_f0voWkZ_C0BmL4CMJY97jVzm_N-41YaFD3jA2Q31DqkFARgEOwBpSIJga_XB-DQa9i0Dg_B5Bg4phcrDKApQXLELzvg0KdCGFv07swt-hCxArCYWwyMZCqoUKoTQ7hzCLgkLEHqMRCZfBgxgLIMRI0wZS10NSYAJYmI70NvQ_BcC4YECUWImBWAYClBUUxAgoNi48OkB0C8cAVHYK0Ww8aaBb7kHvpkLAKiV5rw3mFIxJjgAAAM0ASAACTADMRYwJZxoFWJgQANWcEjMmsdYAGNwVnNAcphFsIkY4mBsSeE6MKHo68BAACyB80DpJgWgL6J1fAqJqRkz631gxwCmKHGctAKaIDSGkXAgoNwSnQKUUgiJmQdDgMaboaROykEqL4XQcBvInSgGkZqEA0CdlxuQcw-hdA8yCuYcw8TzA4AICgJmtsxAzWaRfe5ZI2CwBUc4sQ45_BgC6cBXp_S3AECSCkdIhpzASAwFReUESyl8PTpkuUli4kR0BBeUOKTcD-FNKKMQAANAAKiyccttml3PybAtI8DaClLdIU3BDYEVvxJdo9eaAdzBkFKDWg44VG1j7JEMKb48ZNVoKHaSM4bmxQWYnF5wBZ4ijCnfB-mCFULPTrfB4Ki-4MBiWIv2ZtA5wEttbW29skWOijsxVJD4bmFFKNKvaElDDNUTMmThfZQratJZGAAqiKYMKT7w6uzjSmBuqA5ByNWHW0pqGKXiYjHe8HovYk1FGQMhUAs45x1YjYNGT_rcRWTIFR6gVgeriZNcWyKibXiebTUODcZhQG4oamA4q1rCttoIm5jKnFpDzTmkNea4ToHIEWkt_aMka0juQJRNaXm23ehgGgMxGCtuxowUO71GAEyBfICwVs3yEBoLoLt46S59sDdmrNQpT1iHGoOgtI7gDFtLVY8thNp3VrTqHX6bBSirrMu2kAAAJGQuAABaq8ZgnvSVnc9nrb33uHaOl9RTJ2Vo_dLL9tt_rLoZn-kAfk23fvHIYNAgAeDcABe7ZHADPu9B-DsGlLjqzpe0l40WNFMQ4Wp9Y7mlvsdhh5yWGQCbLBOOZB-HCNrsAw3GA_IZigkPFw9QABOSIkQ6NFN7YxmDnHH3Ppvb7NDZqBOzpDrbAA6rJmi_7LShwkBpntcHmHMevVewUN671KSHVxlYfYUNOKMzG_R8GYFCcqaaPALaQCPMLqHcpaAjFkhI0zWEgc4ReVgNIWE1lTQQC_GdZEGo1TpasrAXwBAiUhduR5rTUAmNpHYwwyawNQZYu7do_25sDXB1DiaitxmrzR1vAmlAXt_pWRkKUDNTHGvOd08hgzt7Ata0w88szIASYLLYBeGz67bZov9LoKqvgHPOdqx5-b3H_POeW1W1btbbb2RWSLPL0BtvwF24B_6fFrkEfa0187F7XOsdm01y7-neO3ZM0Ju46AwRCs-6HPFBLTsA6c048HPGqt8anTOoTh0ZhBhBmQE7BHYvAGcXKWG5A4VhX-9owHrGGvA-c6D7Rl3fPXaa1D4LcTIz46wNAOelW-eSYA9-25Yhm4AGoxDS4rMgk69NfAzA6KA-AA87y0EFKCM6DAAIwFFIYXAFZNX-lYEzOEpRChujgMrboKA5hYtHNr_MWA7eam-sWEUHuj0oFYsGTlMB8ylHt1ZJ3wZQQYBI_QNX_gKzlMyAKP3EexBk0ME4A90hHhiDatjXwuMMFiHxdHtUeZcCh6lw71PdUmYShXhWAAUnUtAFZ3qHRJhWA-GAKvRaq_TjJjOzts9gUDEGYNqs6s6_q5tvXw79ZjYNi1I2xt0ECHAabbmLteYfQtyHC-VuCbW6HOq-hoCI_nVu-AO692lcPd0VHDP0dzZ30hq7i2cfobx8f_bq9RxiB5kqk4lJzF1s1tmlzCFrGIjCHUErDU0iDgLU0f0H2f0HxH19nQNgQ5z8w_x52vEeSEwAHE2BxwZhEQRc-dydHlfYXEPkYAvlbZukUA-kBkSCyCZldA0hNxr9UguCMJAVeCvZqC35YxOV2Cj0-DhgeD0huDkhBCqsQ0uDFsHl-8atUDFCR8s5mVWUaUs5YkK4AECoLBVlNR6C0AG0NQa4UAMw9IQUCAZxdAFhXhC5OBIEABCG4IeX6XFAATRJjqneVoEcJzXGgcO4jyCZlDgYCENY0nG1A8yqiV2j1BEHlDjmDAAkDCBiKKUSJcRhVDhBhgEFFWQvxAHZVkE5WpDMBBgwV9A5XHArEMG2x_ihB_hDnUAHg-UMCwAkCTAkEgGFTVGyKcVyLEHyNtiDyqjBSUnzFKIAGJ4D4DhiGc4jZAmMEwDwPMTYxBQZQ4epDBRRrUyg50QB0BZAftcAUxfN0xkCQ0OQ5Qq4NQ0pcM-YzAW5ypKpqpaoGo3RLRWoOoup9i-oBoMws57jA0NjSgQi0gwiaVzh9QgA"/><span role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor"><path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><span role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor"><path d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span class="code-box-code-action"><span role="img" aria-label="thunderbolt" class="anticon anticon-thunderbolt code-box-stackblitz"><svg viewBox="64 64 896 896" focusable="false" data-icon="thunderbolt" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7zM378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211L378.2 732.5z"></path></svg></span></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span role="img" aria-label="snippets" tabindex="-1" class="anticon anticon-snippets code-box-code-copy code-box-code-action"><svg viewBox="64 64 896 896" focusable="false" data-icon="snippets" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 112H724V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H500V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H320c-17.7 0-32 14.3-32 32v120h-96c-17.7 0-32 14.3-32 32v632c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32v-96h96c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM664 888H232V336h218v174c0 22.1 17.9 40 40 40h174v338zm0-402H514V336h.2L664 485.8v.2zm128 274h-56V456L544 264H360v-80h68v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h152v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h68v576z"></path></svg></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><a class="code-box-code-action" target="_blank" rel="noreferrer" href="/~demos/components-drawer-demo-user-profile"><span role="img" class="anticon code-box-separate"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z"></path><path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z"></path></svg></span></a></div><div class="ant-space-item" style="padding-bottom:16px"><div class="code-expand-icon code-box-code-action"><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg" class="code-expand-icon-hide"/></div></div></div></section><section class="highlight-wrapper"><div class="highlight"><div class="ant-tabs ant-tabs-top ant-tabs-centered css-17ju5m3"><div role="tablist" class="ant-tabs-nav"><div class="ant-tabs-nav-wrap"><div class="ant-tabs-nav-list" style="transform:translate(0px, 0px)"><div data-node-key="tsx" class="ant-tabs-tab ant-tabs-tab-active"><div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0">TypeScript</div></div><div data-node-key="jsx" class="ant-tabs-tab"><div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0">JavaScript</div></div><div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div></div></div><div class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"><button type="button" class="ant-tabs-nav-more" style="visibility:hidden;order:1" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="null-more-popup" id="null-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button></div></div><div class="ant-tabs-content-holder"><div class="ant-tabs-content ant-tabs-content-top"><div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"><pre class="language-tsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Avatar<span class="token punctuation">,</span> Col<span class="token punctuation">,</span> Divider<span class="token punctuation">,</span> Drawer<span class="token punctuation">,</span> List<span class="token punctuation">,</span> Row <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">interface</span> <span class="token class-name">DescriptionItemProps</span> <span class="token punctuation">{</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
<span class="token literal-property property">content</span><span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> <span class="token function-variable function">DescriptionItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> title<span class="token punctuation">,</span> content <span class="token punctuation">}</span><span class="token operator">:</span> DescriptionItemProps</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"site-description-item-profile-wrapper"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>p className<span class="token operator">=</span><span class="token string">"site-description-item-profile-p-label"</span><span class="token operator">></span><span class="token punctuation">{</span>title<span class="token punctuation">}</span><span class="token operator">:</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token punctuation">{</span>content<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token literal-property property">App</span><span class="token operator">:</span> React<span class="token punctuation">.</span><span class="token function-variable function">FC</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>open<span class="token punctuation">,</span> setOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">showDrawer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">onClose</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span><span class="token operator">></span>
<span class="token operator">&lt;</span>List
dataSource<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Lily'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Lily'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">}</span>
bordered
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>List<span class="token punctuation">.</span>Item
key<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>id<span class="token punctuation">}</span>
actions<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
<span class="token operator">&lt;</span>a onClick<span class="token operator">=</span><span class="token punctuation">{</span>showDrawer<span class="token punctuation">}</span> key<span class="token operator">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">a-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span><span class="token operator">></span>
View Profile
<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">}</span>
<span class="token operator">></span>
<span class="token operator">&lt;</span>List<span class="token punctuation">.</span>Item<span class="token punctuation">.</span>Meta
avatar<span class="token operator">=</span><span class="token punctuation">{</span>
<span class="token operator">&lt;</span>Avatar src<span class="token operator">=</span><span class="token string">"https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">}</span>
title<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">&lt;</span>a href<span class="token operator">=</span><span class="token string">"https://ant.design/index-cn"</span><span class="token operator">></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token punctuation">}</span>
description<span class="token operator">=</span><span class="token string">"Progresser XTech"</span>
<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>List<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Drawer width<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">640</span><span class="token punctuation">}</span> placement<span class="token operator">=</span><span class="token string">"right"</span> closable<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span> onClose<span class="token operator">=</span><span class="token punctuation">{</span>onClose<span class="token punctuation">}</span> open<span class="token operator">=</span><span class="token punctuation">{</span>open<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>p className<span class="token operator">=</span><span class="token string">"site-description-item-profile-p"</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">marginBottom</span><span class="token operator">:</span> <span class="token number">24</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
User Profile
<span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span>p className<span class="token operator">=</span><span class="token string">"site-description-item-profile-p"</span><span class="token operator">></span>Personal<span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem title<span class="token operator">=</span><span class="token string">"Full Name"</span> content<span class="token operator">=</span><span class="token string">"Lily"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem title<span class="token operator">=</span><span class="token string">"Account"</span> content<span class="token operator">=</span><span class="token string">"AntDesign@example.com"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem title<span class="token operator">=</span><span class="token string">"City"</span> content<span class="token operator">=</span><span class="token string">"HangZhou"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem title<span class="token operator">=</span><span class="token string">"Country"</span> content<span class="token operator">=</span><span class="token string">"China🇨🇳"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem title<span class="token operator">=</span><span class="token string">"Birthday"</span> content<span class="token operator">=</span><span class="token string">"February 2,1900"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem title<span class="token operator">=</span><span class="token string">"Website"</span> content<span class="token operator">=</span><span class="token string">"-"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">24</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem
title<span class="token operator">=</span><span class="token string">"Message"</span>
content<span class="token operator">=</span><span class="token string">"Make things as simple as possible but no simpler."</span>
<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Divider <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span>p className<span class="token operator">=</span><span class="token string">"site-description-item-profile-p"</span><span class="token operator">></span>Company<span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem title<span class="token operator">=</span><span class="token string">"Position"</span> content<span class="token operator">=</span><span class="token string">"Programmer"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem title<span class="token operator">=</span><span class="token string">"Responsibilities"</span> content<span class="token operator">=</span><span class="token string">"Coding"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem title<span class="token operator">=</span><span class="token string">"Department"</span> content<span class="token operator">=</span><span class="token string">"XTech"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem title<span class="token operator">=</span><span class="token string">"Supervisor"</span> content<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">&lt;</span>a<span class="token operator">></span>Lin<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">24</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem
title<span class="token operator">=</span><span class="token string">"Skills"</span>
content<span class="token operator">=</span><span class="token string">"C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc."</span>
<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Divider <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span>p className<span class="token operator">=</span><span class="token string">"site-description-item-profile-p"</span><span class="token operator">></span>Contacts<span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem title<span class="token operator">=</span><span class="token string">"Email"</span> content<span class="token operator">=</span><span class="token string">"AntDesign@example.com"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem title<span class="token operator">=</span><span class="token string">"Phone Number"</span> content<span class="token operator">=</span><span class="token string">"+86 181 0000 0000"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span>Col span<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">24</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>DescriptionItem
title<span class="token operator">=</span><span class="token string">"Github"</span>
content<span class="token operator">=</span><span class="token punctuation">{</span>
<span class="token operator">&lt;</span>a href<span class="token operator">=</span><span class="token string">"http://github.com/ant-design/ant-design/"</span><span class="token operator">></span>
github<span class="token punctuation">.</span>com<span class="token operator">/</span>ant<span class="token operator">-</span>design<span class="token operator">/</span>ant<span class="token operator">-</span>design<span class="token operator">/</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">></span>
<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Drawer<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</code></pre></div></div></div></div></div><div class="highlight"><pre><code class="css"><span class="token selector">.site-description-item-profile-wrapper</span> <span class="token punctuation">{</span>
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> 7px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.65<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 1.5715<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.ant-drawer-body p.site-description-item-profile-p</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.85<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 1.5715<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.site-description-item-profile-p-label</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.85<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-drawer-demo-size"><section class="code-box-demo"><div class="ant-space css-17ju5m3 ant-space-horizontal ant-space-align-center"><div class="ant-space-item" style="margin-right:8px"><button type="button" class="ant-btn css-17ju5m3 ant-btn-primary"><span>Open Default Size (378px)</span></button></div><div class="ant-space-item"><button type="button" class="ant-btn css-17ju5m3 ant-btn-primary"><span>Open Large Size (736px)</span></button></div></div></section><section class="code-box-meta markdown"><div class="code-box-title"><a href="#components-drawer-demo-size">预设宽度</a><a href="https://github.com/ant-design/ant-design/edit/master/components/drawer/demo/size.tsx" target="_blank" rel="noopener noreferrer" class="css-le7aoc"><span role="img" aria-label="edit" class="anticon anticon-edit"><svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></span></a></div><div class="code-box-description"><div><p>抽屉的默认宽度为 <code>378px</code>，另外还提供一个大号抽屉 <code>736px</code>，可以用 <code>size</code> 属性来设置。</p></div></div><div class="ant-space css-17ju5m3 ant-space-horizontal ant-space-align-center code-box-actions" style="flex-wrap:wrap;margin-bottom:-16px"><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiICEZgfdGC92oDK9AAQBaIWkYATAAIBWAgHYCARhAAaEAFs0ESohC7JMAB7EEGoygZHyGCPGYTakzvKWqNAJxiYm-gHrKABwEAAxh6iDSTiJGcBC45AD0EDTkCPpQaPRwTBrStACeVnBJ3r6cgSHhoZEFxfBlPhi0saSalcFhEV7NrZLtndU9IJ4YIgCurFCV8gDMAEwj5S0icBieECi0GSD-8jUgAL4WMABuACIwVuQ2dg7ILA3rm9uz3QvHGi9bO8y5aE8flGfTWG1-cCEAKBkQARhNoC59CtWj9tpD4YjIjlgSiwa8dkIcaIRAwzgBeEgDDoaGBEGAtTh4tGEukMpgnECwzykADucBgnjgUAguSQAG0QAA-cILACkkXIpFoQiMaBcAF0jpzDCYCBg4BlqHQGMCvgZbnqdsZmGl6IxOBBNChSEChAAlPpCMA8zRCADkKP9AG4ADrkJ0ut3AIQbHz0d2kZVCI7e30BvHUpIYEWmkPhyOulVXTSkNPtAMEJJGUv58jhuPZGCJ5UACgGGAmmlNBHwtAAorBu4wAEKFACSklb_rtOnIgv9AEpFwRvJbPK2ADwlstJKWLsPkIRCc010gEa22k0O_SFt2e3xqIQxiYCgDKtCbKfLfsDfTrd4qv6Va6qYBpwABzpFs-QgjlMtAUE-FyeGgvKCk-b7oBgMDfj6Fb-k4kiQVGKpFFYMHIahgoAAo8igkKpnhv6EUkjSSChaGeHWDYULkQgAIIoCgiAen0BAAGIAMJCOSQitouMlSs-4bHmkfHiqQNxPgKtAAPI3BqMlCK-MAfk2rZgGgUACgeKmxrxKrivEABeMDaTAtBvhArmGbJJlmfQ24cTRdFwOK_ouTA_oalK8mHnZakqnAAAWfJXJZExQLQlGcUZ8mKcpR7HlCHlea505GBlWVLoexUlXpNytrQngTDAtlFUc8VFYlUKpbyAAygL4Dlgp5Qp5JKcAdnHjpZUwNOWSePgNXTfV-kME1LVtbVKZdapDlCBQklQKQApjQVU1FTNHnreQFlWTZO2deGdneLQEyeEerarZuUqrcem6YZgMB_VddVCJucG0AhR5kTA5KhiAKCbNoniFIjh3kMdqRYOSwApWlMBVdlwWeEcoPg-Dt1COlaCZSqc1yXMChBCgxiLv9xWbkkUMwxTlMQ7zFBEg0CNIyjgLoyAmPY9geMEwNQ0wCNZP8wLQjU4NS04YzrYKHMABsbMc2DdXc0L5Bq1zSRA9hVsAyrnPHqw7Dw8AAAGAAk-PeTAqYq-7RxO0IKBZNhw60GLmy4MltCI8HkXy77Qem8VR0nQKePp6dfvB5pDBZzcKfqyYzVoHjwcA7bIOV1zFsyyKcvANnArk5JEjYVA5vwRQ9sC5DPew6LiPI06ksY-nONZ1jGd-336u6QA0rXAM84P8_W9XG_F-DG-bigUpvu0OF2qacAEBf3MH8H--H8f9mMGfF8EFfe8H0f3YP_aOzP6_nPcyrK23N-btWevWecxgSKqiJnTLKAkhLBnNKBAgsdNAzEeKfG8IAfoAEILi6UkgAFQAJrUX7EIVBUA-6bkoUILI5BcBiwYIjPeyUfCSA3gDbsn5YzJUBDpMWUwwAiCCCw2um5uFoCEOQNA3YxZnHsLyEiGNMGR0RryCAkhaDJXJEYBR2ERAaK0clJ8ug2AQCsmCKy8NlDaWSpscgWARAIREJASOSoxGpzNpI6Rsj4aI20TAbsIgaAnU8Co68aiQAAGJQhxPiZ49W3M2Hqj3rCUgkhCicIhpICAZwhCaLFrOXQgoMa5EKLAMW6BJC5IYSJBYAAWNmGM9ziJZFKHqpYJiMAAHIZJwrJDsXYex9kHEE00Y5JzTmKfOLiB5ubtJvkkdJmTqFJEoVbY42ogA"/><span role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor"><path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><span role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor"><path d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z"></path></svg></span></form></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span class="code-box-code-action"><span role="img" aria-label="thunderbolt" class="anticon anticon-thunderbolt code-box-stackblitz"><svg viewBox="64 64 896 896" focusable="false" data-icon="thunderbolt" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7zM378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211L378.2 732.5z"></path></svg></span></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><span role="img" aria-label="snippets" tabindex="-1" class="anticon anticon-snippets code-box-code-copy code-box-code-action"><svg viewBox="64 64 896 896" focusable="false" data-icon="snippets" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 112H724V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H500V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H320c-17.7 0-32 14.3-32 32v120h-96c-17.7 0-32 14.3-32 32v632c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32v-96h96c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM664 888H232V336h218v174c0 22.1 17.9 40 40 40h174v338zm0-402H514V336h.2L664 485.8v.2zm128 274h-56V456L544 264H360v-80h68v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h152v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h68v576z"></path></svg></span></div><div class="ant-space-item" style="margin-right:16px;padding-bottom:16px"><a class="code-box-code-action" target="_blank" rel="noreferrer" href="/~demos/components-drawer-demo-size"><span role="img" class="anticon code-box-separate"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z"></path><path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z"></path></svg></span></a></div><div class="ant-space-item" style="padding-bottom:16px"><div class="code-expand-icon code-box-code-action"><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg" class="code-expand-icon-show"/><img alt="expand code" src="https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg" class="code-expand-icon-hide"/></div></div></div></section><section class="highlight-wrapper"><div class="highlight"><div class="ant-tabs ant-tabs-top ant-tabs-centered css-17ju5m3"><div role="tablist" class="ant-tabs-nav"><div class="ant-tabs-nav-wrap"><div class="ant-tabs-nav-list" style="transform:translate(0px, 0px)"><div data-node-key="tsx" class="ant-tabs-tab ant-tabs-tab-active"><div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0">TypeScript</div></div><div data-node-key="jsx" class="ant-tabs-tab"><div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0">JavaScript</div></div><div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div></div></div><div class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"><button type="button" class="ant-tabs-nav-more" style="visibility:hidden;order:1" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="null-more-popup" id="null-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button></div></div><div class="ant-tabs-content-holder"><div class="ant-tabs-content ant-tabs-content-top"><div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"><pre class="language-tsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Drawer<span class="token punctuation">,</span> Space <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> type <span class="token punctuation">{</span> DrawerProps <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd/es/drawer'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token literal-property property">App</span><span class="token operator">:</span> React<span class="token punctuation">.</span><span class="token function-variable function">FC</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>open<span class="token punctuation">,</span> setOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>size<span class="token punctuation">,</span> setSize<span class="token punctuation">]</span> <span class="token operator">=</span> useState<span class="token operator">&lt;</span>DrawerProps<span class="token punctuation">[</span><span class="token string">'size'</span><span class="token punctuation">]</span><span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">showDefaultDrawer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setSize</span><span class="token punctuation">(</span><span class="token string">'default'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">showLargeDrawer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setSize</span><span class="token punctuation">(</span><span class="token string">'large'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">onClose</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Space<span class="token operator">></span>
<span class="token operator">&lt;</span>Button type<span class="token operator">=</span><span class="token string">"primary"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>showDefaultDrawer<span class="token punctuation">}</span><span class="token operator">></span>
Open Default <span class="token function">Size</span> <span class="token punctuation">(</span>378px<span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span>Button type<span class="token operator">=</span><span class="token string">"primary"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>showLargeDrawer<span class="token punctuation">}</span><span class="token operator">></span>
Open Large <span class="token function">Size</span> <span class="token punctuation">(</span>736px<span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Space<span class="token operator">></span>
<span class="token operator">&lt;</span>Drawer
title<span class="token operator">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>size<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> Drawer</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span>
placement<span class="token operator">=</span><span class="token string">"right"</span>
size<span class="token operator">=</span><span class="token punctuation">{</span>size<span class="token punctuation">}</span>
onClose<span class="token operator">=</span><span class="token punctuation">{</span>onClose<span class="token punctuation">}</span>
open<span class="token operator">=</span><span class="token punctuation">{</span>open<span class="token punctuation">}</span>
extra<span class="token operator">=</span><span class="token punctuation">{</span>
<span class="token operator">&lt;</span>Space<span class="token operator">></span>
<span class="token operator">&lt;</span>Button onClick<span class="token operator">=</span><span class="token punctuation">{</span>onClose<span class="token punctuation">}</span><span class="token operator">></span>Cancel<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span>Button type<span class="token operator">=</span><span class="token string">"primary"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>onClose<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token constant">OK</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Space<span class="token operator">></span>
<span class="token punctuation">}</span>
<span class="token operator">></span>
<span class="token operator">&lt;</span>p<span class="token operator">></span>Some contents<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span>p<span class="token operator">></span>Some contents<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span>p<span class="token operator">></span>Some contents<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Drawer<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</code></pre></div></div></div></div></div></section></section></section></div></div><div class="markdown"><h2 id="api"><a aria-hidden="true" tabindex="-1" href="#api"><span class="icon icon-link"></span></a>API</h2><p><strong>🚨 注意：</strong> v5 使用 <code>rootClassName</code> 与 <code>rootStyle</code> 来配置最外层元素样式。原 v4 <code>className</code> 与 <code>style</code> 改至配置 Drawer 窗体样式以和 Modal 对齐。</p><div class="dumi-default-table"><div class="dumi-default-table-content"><table class="component-api-table"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th><th>版本</th></tr></thead><tbody><tr><td>autoFocus</td><td>抽屉展开后是否将焦点切换至其 Dom 节点</td><td>boolean</td><td>true</td><td>4.17.0</td></tr><tr><td>afterOpenChange</td><td>切换抽屉时动画结束后的回调</td><td>function(open)</td><td>-</td><td></td></tr><tr><td>bodyStyle</td><td>可用于设置 Drawer 内容部分的样式</td><td>CSSProperties</td><td>-</td><td></td></tr><tr><td>className</td><td>Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName</td><td>string</td><td>-</td><td></td></tr><tr><td>closeIcon</td><td>自定义关闭图标。5.7.0：设置为 <code>null</code> 或 <code>false</code> 时隐藏关闭按钮</td><td>boolean | ReactNode</td><td>&lt;CloseOutlined /&gt;</td><td></td></tr><tr><td>contentWrapperStyle</td><td>可用于设置 Drawer 包裹内容部分的样式</td><td>CSSProperties</td><td>-</td><td></td></tr><tr><td>destroyOnClose</td><td>关闭时销毁 Drawer 里的子元素</td><td>boolean</td><td>false</td><td></td></tr><tr><td>extra</td><td>抽屉右上角的操作区域</td><td>ReactNode</td><td>-</td><td>4.17.0</td></tr><tr><td>footer</td><td>抽屉的页脚</td><td>ReactNode</td><td>-</td><td></td></tr><tr><td>footerStyle</td><td>抽屉页脚部件的样式</td><td>CSSProperties</td><td>-</td><td></td></tr><tr><td>forceRender</td><td>预渲染 Drawer 内元素</td><td>boolean</td><td>false</td><td></td></tr><tr><td>getContainer</td><td>指定 Drawer 挂载的节点，<strong>并在容器内展现</strong>，<code>false</code> 为挂载在当前位置</td><td>HTMLElement | () =&gt; HTMLElement | Selectors | false</td><td>body</td><td></td></tr><tr><td>headerStyle</td><td>用于设置 Drawer 头部的样式</td><td>CSSProperties</td><td>-</td><td></td></tr><tr><td>height</td><td>高度, 在 <code>placement</code> 为 <code>top</code> 或 <code>bottom</code> 时使用</td><td>string | number</td><td>378</td><td></td></tr><tr><td>keyboard</td><td>是否支持键盘 esc 关闭</td><td>boolean</td><td>true</td><td></td></tr><tr><td>mask</td><td>是否展示遮罩</td><td>boolean</td><td>true</td><td></td></tr><tr><td>maskClosable</td><td>点击蒙层是否允许关闭</td><td>boolean</td><td>true</td><td></td></tr><tr><td>maskStyle</td><td>遮罩样式</td><td>CSSProperties</td><td>{}</td><td></td></tr><tr><td>placement</td><td>抽屉的方向</td><td><code>top</code> | <code>right</code> | <code>bottom</code> | <code>left</code></td><td><code>right</code></td><td></td></tr><tr><td>push</td><td>用于设置多层 Drawer 的推动行为</td><td>boolean | { distance: string | number }</td><td>{ distance: 180 }</td><td>4.5.0+</td></tr><tr><td>rootClassName</td><td>对话框外层容器的类名</td><td>string</td><td>-</td><td></td></tr><tr><td>rootStyle</td><td>可用于设置 Drawer 最外层容器的样式，和 <code>style</code> 的区别是作用节点包括 <code>mask</code></td><td>CSSProperties</td><td>-</td><td></td></tr><tr><td>size</td><td>预设抽屉宽度（或高度），default <code>378px</code> 和 large <code>736px</code></td><td>&#x27;default&#x27; | &#x27;large&#x27;</td><td>&#x27;default&#x27;</td><td>4.17.0</td></tr><tr><td>style</td><td>设计 Drawer 容器样式，如果你只需要设置内容部分请使用 <code>bodyStyle</code></td><td>CSSProperties</td><td>-</td><td></td></tr><tr><td>title</td><td>标题</td><td>ReactNode</td><td>-</td><td></td></tr><tr><td>open</td><td>Drawer 是否可见</td><td>boolean</td><td>-</td><td></td></tr><tr><td>width</td><td>宽度</td><td>string | number</td><td>378</td><td></td></tr><tr><td>zIndex</td><td>设置 Drawer 的 <code>z-index</code></td><td>number</td><td>1000</td><td></td></tr><tr><td>onClose</td><td>点击遮罩层或左上角叉或取消按钮的回调</td><td>function(e)</td><td>-</td><td></td></tr></tbody></table></div></div><h2 id="design-token"><a aria-hidden="true" tabindex="-1" href="#design-token"><span class="icon icon-link"></span></a>Design Token</h2></div><div><div class="css-1ppfagk"><span role="img" aria-label="right" class="anticon anticon-right css-109zw3h"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span><h3>组件 Token</h3></div></div><div><div class="css-1ppfagk"><span role="img" aria-label="right" class="anticon anticon-right css-109zw3h"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span><h3>全局 Token</h3></div></div></div><script>$RC("B:3","S:3")</script>