Drawer 抽屉

一个从页面边缘滑动出来的面板，可以替代 Modal 呈现更多内容。

获取组件

MainIndividual
import { Drawer } from 'rsuite';
  • <Drawer> - 抽屉的容器。
  • <Drawer.Body> - 抽屉的内容。
  • <Drawer.Actions> - 抽屉的操作按钮， 一般放置在抽屉的头部。（可选）
  • <Drawer.Header> - 抽屉的头部， 包含关闭按钮。（可选）
  • <Drawer.Title> - 抽屉的标题， 一般放置在抽屉的头部。 （可选）
  • <Drawer.Footer> - 抽屉的底部。（可选）

演示

默认

背景板

显示位置

尺寸

Props

<Drawer>

属性名称 类型 (默认值) 描述
autoFocus boolean (true) 当设置为 true, Drawer 被打开是自动焦点移到其自身,辅助屏幕阅读器容易访问
backdrop boolean | 'static' 当设置为 true，Drawer 打开时会显示背景，点击背景会关闭 Drawer，如果不想关闭 Drawer，可以设置为 'static'
backdropClassName string 为背景设置一个自定义 className
classPrefix string ('drawer') 组件 CSS 类的前缀
closeButton ReactNode | boolean 自定义关闭按钮，设置为 false 时不显示关闭按钮
container HTMLElement | (() => HTMLElement) 设置渲染的容器
enforceFocus boolean (true) 当设置为 true, Drawer 将防止焦点在打开时离开,辅助屏幕阅读器容易访问
full boolean 已废弃，使用 size="full" 代替。 撑满全屏
keyboard boolean 按下 esc 键时关闭 Drawer
onClose () => void 隐藏时的回调函数
onEnter () => void 显示前动画过渡的回调函数
onEntered () => void 显示后动画过渡的回调函数
onEntering () => void 显示中动画过渡的回调函数
onExit () => void 退出前动画过渡的回调函数
onExited () => void 退出后动画过渡的回调函数
onExiting () => void 退出中动画过渡的回调函数
onOpen () => void 显示时的回调函数
open * boolean 显示 Drawer
placement Placement(right) 设置 Drawer 显示的位置
size 'xs' | 'sm' | 'md' | lg' | 'full' | number | string 设置 Drawer 尺寸

Placement 

type Placement = 'top' | 'bottom' | 'right' | 'left';
Vercel banner