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.
686 lines
314 KiB
686 lines
314 KiB
<!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);bo |