Drawer

边缘侧滑面板。关闭文案走 locale.Drawer.closeplacement / destroyOnClose / maskClosable 可读 componentConfig.Drawer

与 Modal 同属遮罩层浮层,但 无默认 footer / onOk;打开时支持 Esc,默认点击遮罩关闭。

文档站 Demo 跟随 Rspress 明暗主题(亮色用 admin)。

基础用法

<Drawer open={open} title="详情" placement="right" onClose={() => setOpen(false)}>
  内容
</Drawer>

实时演示

Esc / 点击遮罩可关闭;与 Modal 不同,Drawer 无默认 footer。

API

DrawerProps

属性 类型 默认值 说明
open boolean 是否显示
title ReactNode 标题(关联 aria-labelledby
placement "left" | "right" | "top" | "bottom" "right" 可读 config
destroyOnClose boolean false 关闭后卸载内容
maskClosable boolean true 点击遮罩关闭
onClose () => void Esc / 遮罩 / 关闭按钮
children ReactNode 面板正文
className string 追加类名