Drawer 抽屉

Drawer 从屏幕的一边滑出一个面板，盖在变暗的页面上：列表旁的详情、筛选条件、一条讨论串，或者手机上的导航菜单。它分两部分：Drawer 是浮层和滑出的面板，DrawerContent 在里面排好标题、自己滚动的正文和底栏。

它和 Modal 是同一种浮层：通过 z-index 管理器叠放，所以在里面打开的 Select、Popover、Modal 会显示在它上面，按 Esc 先关最里层。打开期间焦点留在里面，背后的页面对读屏软件隐藏、也不能滚动；关闭后焦点回到打开它的元素。

演示

基础用法

用 show 和 onUpdateShow 控制，默认从右边滑出。DrawerContent 的 title 同时是抽屉的名称，closable 加上 ×，footer 在正文下方固定一行。

位置

placement 选择从哪一边滑出：top、right、bottom 或 left。上下两边的抽屉横跨整个屏幕。

导航菜单

窄屏布局的菜单就是一个左侧抽屉，比如本站在手机上的菜单。选一个页面，菜单随即关闭。

长内容

标题和底栏不动，正文在两者之间用 ScrollArea 滚动。nativeScrollbar 改用浏览器自己的滚动条。

可调整大小

resizable 让内侧的边可以拖动；也可以用 Tab 聚焦它后按方向键调整。minWidth / maxWidth（上下抽屉用 minHeight / maxHeight）限定范围，onUpdateWidth / onUpdateHeight 报告新的尺寸。

遮罩

showMask="transparent" 保留一层看不见的遮罩，点它仍然会关闭。showMask={false} 不画遮罩：页面照常可用，焦点也不会被困住（同时关掉 blockScroll 才能滚动页面）。除非关掉 maskClosable，点页面仍会关闭抽屉。

Drawer Props

名称	类型	默认值	说明	版本
`show`	`boolean`	`undefined`	受控的显示状态。	未发布
`defaultShow`	`boolean`	`false`	非受控时的初始显示状态。	未发布
`onUpdateShow`	`(show: boolean) => void`	`undefined`	抽屉要打开或关闭时，以新的状态调用。	未发布
`children`	`ReactNode`	`undefined`	面板内容，通常是一个 `DrawerContent`。	未发布
`placement`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'right'`	从哪一边滑出。	未发布
`width`	`number \| string`	`undefined`	左右抽屉的受控宽度，数字单位为 px。主题默认 360px。	未发布
`defaultWidth`	`number \| string`	`undefined`	非受控时的初始宽度。	未发布
`onUpdateWidth`	`(width: number) => void`	`undefined`	调整大小时以新的宽度（px）调用。	未发布
`height`	`number \| string`	`undefined`	上下抽屉的受控高度，数字单位为 px。主题默认 320px。	未发布
`defaultHeight`	`number \| string`	`undefined`	非受控时的初始高度。	未发布
`onUpdateHeight`	`(height: number) => void`	`undefined`	调整大小时以新的高度（px）调用。	未发布
`resizable`	`boolean`	`false`	拖动内侧的边（或在它上面按方向键）调整大小。	未发布
`minWidth` / `maxWidth`	`number`	`undefined`	调整大小时的宽度范围（px）。	未发布
`minHeight` / `maxHeight`	`number`	`undefined`	调整大小时的高度范围（px）。	未发布
`showMask`	`boolean \| 'transparent'`	`true`	让页面变暗、保留透明遮罩，或不画遮罩让页面照常可用。	未发布
`maskClosable`	`boolean`	`true`	点遮罩（没有遮罩时点页面）关闭。	未发布
`onMaskClick`	`(event: MouseEvent) => void`	`undefined`	点遮罩时调用，不论是否关闭。	未发布
`closeOnEsc`	`boolean`	`true`	按 Esc 关闭。	未发布
`onEsc`	`() => void`	`undefined`	按 Esc 时调用，不论是否关闭。	未发布
`autoFocus`	`boolean`	`true`	打开时聚焦里面第一个可聚焦元素；关掉则聚焦抽屉本身。	未发布
`trapFocus`	`boolean`	`true`	把 Tab 留在里面，并对读屏软件隐藏页面（`aria-modal`）。只在有遮罩时生效。	未发布
`blockScroll`	`boolean`	`true`	打开期间禁止页面滚动。	未发布
`displayDirective`	`'if' \| 'show'`	`'if'`	关闭后卸载，或保留 DOM 并隐藏。	未发布
`to`	`string \| HTMLElement \| false`	`undefined`	挂载位置；`false` 原地渲染。默认是 ConfigProvider 的 `portalContainer`，其次 `document.body`。	未发布
`zIndex`	`number`	`undefined`	固定的 z-index，而不是叠在之前打开的浮层之上。	未发布
`onAfterEnter`	`() => void`	`undefined`	进入动画结束时调用。	未发布
`onAfterLeave`	`() => void`	`undefined`	离开动画结束时调用。	未发布

其他属性、className、style 和 ref 传给抽屉元素（role="dialog"）。抽屉不会超出屏幕，在贴着的边上避开刘海和 Home 指示条；开启减弱动态效果时只做淡入淡出。

DrawerContent Props

名称	类型	默认值	说明	版本
`title`	`ReactNode`	`undefined`	标题，同时是抽屉的名称。	未发布
`children`	`ReactNode`	`undefined`	正文。内容过高时在标题和底栏之间滚动。	未发布
`footer`	`ReactNode`	`undefined`	固定在正文下方的一行。	未发布
`closable`	`boolean`	`false`	显示 × 按钮。	未发布
`onClose`	`() => boolean \| void \| Promise<boolean \| void>`	`undefined`	点 × 时调用。返回 `false` 则不关闭。	未发布
`nativeScrollbar`	`boolean`	`false`	正文用浏览器自己的滚动条，而不是 ScrollArea。	未发布

其他属性、className、style 和 ref 传给内容的根元素。DrawerContent 必须放在 Drawer 里面。

#演示

#基础用法

#位置

#导航菜单

#长内容

#可调整大小

#遮罩

#Drawer Props

#DrawerContent Props

演示

基础用法

位置

导航菜单

长内容

可调整大小

遮罩

Drawer Props

DrawerContent Props