Drawer 抽屉

一个从页面边缘滑动出来的浮层,可以替代 Modal 放更多内容。

获取组件

import { Drawer } from 'rsuite';

演示

默认

背景板

显示位置

抽屉尺寸

全屏

Props

<Drawer>

属性名称 类型 (默认值) 描述
autoFocus boolean (true) 当设置为 true, Drawer 被打开是自动焦点移到其自身,辅助屏幕阅读器容易访问
backdrop unions: boolean, 'static' 当设置为 true,Drawer 打开时会显示背景,点击背景会关闭 Drawer,如果不想关闭 Drawer,可以设置为 'static'
backdropClassName string 为背景设置一个自定义 className
classPrefix string ('drawer') 组件 CSS 类的前缀
enforceFocus boolean (true) 当设置为 true, Drawer 将防止焦点在打开时离开,辅助屏幕阅读器容易访问
full boolean 撑满全屏
keyboard boolean 按下 esc 键时关闭 Drawer
onEnter () => void 显示前动画过渡的回调函数
onEntered () => void 显示后动画过渡的回调函数
onEntering () => void 显示中动画过渡的回调函数
onExit () => void 退出前动画过渡的回调函数
onExited () => void 退出后动画过渡的回调函数
onExiting () => void 退出中动画过渡的回调函数
onHide () => void 隐藏时的回调函数
onShow () => void 显示时的回调函数
placement enum: 'top','right','bottom', 'left' (right) 设置 Drawer 显示的位置
show * boolean 显示 Drawer
size enum: 'lg', 'md', 'sm', 'xs' 设置 Drawer 尺寸