logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.12.1
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮New
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局New
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器New
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码New
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导New
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印New
  • 其他
    • Affix固钉
    • App包裹组件New
    • ConfigProvider全局化配置
何时使用
代码演示
基础抽屉
自定义位置
额外操作
渲染在当前 DOM
抽屉表单
信息预览抽屉
多层抽屉
预设宽度
自定义内部样式
API
主题变量（Design Token）

Drawer
抽屉

    • Alert警告提示Message全局提示

    相关资源

    Ant Design Charts
    Ant Design Pro
    Ant Design Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Landing-首页模板集
    Scaffolds-脚手架市场
    Umi-React 应用开发框架
    dumi-组件/文档研发工具
    qiankun-微前端框架
    ahooks-React Hooks 库
    Ant Motion-设计动效
    国内镜像站点 🇨🇳

    社区

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design 语雀专栏
    Ant Design 知乎专栏
    体验科技专栏
    seeconfSEE Conf-蚂蚁体验科技大会
    加入我们

    帮助

    GitHub
    更新日志
    常见问题
    报告 Bug
    议题
    讨论区
    StackOverflow
    SegmentFault

    Ant XTech更多产品

    yuque语雀-构建你的数字花园
    AntVAntV-数据可视化解决方案
    EggEgg-企业级 Node.js 框架
    kitchenKitchen-Sketch 工具集
    GalaceanGalacean-互动图形解决方案
    xtech蚂蚁体验科技
    主题编辑器
    Made with ❤ by
    蚂蚁集团和 Ant Design 开源社区

    屏幕边缘滑出的浮层面板。

    何时使用

    抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。

    • 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
    • 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。

    代码演示

    基础抽屉

    基础抽屉，点击触发按钮抽屉从右滑出，点击遮罩区关闭。

    expand codeexpand code
    额外操作

    在 Ant Design 规范中，操作按钮建议放在抽屉的右上角，可以使用 extra 属性来实现。

    expand codeexpand code
    抽屉表单

    在抽屉中使用表单。

    expand codeexpand code
    多层抽屉

    在抽屉内打开新的抽屉，用以解决多分支任务的复杂状况。

    expand codeexpand code
    自定义内部样式

    通过 classNames 属性设置抽屉内部区域（header、body、footer、mask、wrapper）的 className。

    expand codeexpand code
    自定义位置

    自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭。

    expand codeexpand code
    Render in this
    渲染在当前 DOM

    渲染在当前 dom 里。自定义容器，查看 getContainer。

    注意：在 v5 中 style 与 className 迁移至 Drawer 面板上与 Modal 保持一致，原 style 与 className 替换为 rootStyle 与 rootClassName。

    当 getContainer 返回 DOM 节点时，需要手动设置 rootStyle 为 { position: 'absolute' }，参考 #41951。

    expand codeexpand code

    • Lily

      Progresser XTech
      • View Profile

    • Lily

      Progresser XTech
      • View Profile
    信息预览抽屉

    需要快速预览对象概要时使用，点击遮罩区关闭。

    expand codeexpand code
    预设宽度

    抽屉的默认宽度为 378px，另外还提供一个大号抽屉 736px，可以用 size 属性来设置。

    expand codeexpand code

    API

    通用属性参考：通用属性

    🚨 注意： v5 使用 rootClassName 与 rootStyle 来配置最外层元素样式。原 v4 className 与 style 改至配置 Drawer 窗体样式以和 Modal 对齐。

    参数说明类型默认值版本
    autoFocus抽屉展开后是否将焦点切换至其 Dom 节点booleantrue4.17.0
    afterOpenChange切换抽屉时动画结束后的回调function(open)-
    classNameDrawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassNamestring-
    classNames配置抽屉内置模块的 classNameheader?: string; body?: string; footer?: string; mask?: string; wrapper?: string;-
    styles配置抽屉内置模块的 styleheader?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; wrapper?: CSSProperties;-5.10.0
    closeIcon自定义关闭图标。5.7.0：设置为 null 或 false 时隐藏关闭按钮boolean | ReactNode<CloseOutlined />
    contentWrapperStyle可用于设置 Drawer 包裹内容部分的样式CSSProperties-
    destroyOnClose关闭时销毁 Drawer 里的子元素booleanfalse
    extra抽屉右上角的操作区域ReactNode-4.17.0
    footer抽屉的页脚ReactNode-
    forceRender预渲染 Drawer 内元素booleanfalse
    getContainer指定 Drawer 挂载的节点，并在容器内展现，false 为挂载在当前位置HTMLElement | () => HTMLElement | Selectors | falsebody
    height高度，在 placement 为 top 或 bottom 时使用string | number378
    keyboard是否支持键盘 esc 关闭booleantrue
    mask是否展示遮罩booleantrue
    maskClosable点击蒙层是否允许关闭booleantrue
    placement抽屉的方向top | right | bottom | leftright
    push用于设置多层 Drawer 的推动行为boolean | { distance: string | number }{ distance: 180 }4.5.0+
    rootStyle可用于设置 Drawer 最外层容器的样式，和 style 的区别是作用节点包括 maskCSSProperties-
    size预设抽屉宽度（或高度），default 378px 和 large 736px'default' | 'large''default'4.17.0
    style设计 Drawer 容器样式，如果你只需要设置内容部分请使用 bodyStyleCSSProperties-
    title标题ReactNode-
    openDrawer 是否可见boolean-
    width宽度string | number378
    zIndex设置 Drawer 的 z-indexnumber1000
    onClose点击遮罩层或左上角叉或取消按钮的回调function(e)-

    主题变量（Design Token）

    组件 Token如何定制？

    Token 名称描述类型默认值
    footerPaddingBlock底部区域纵向内间距number8
    footerPaddingInline底部区域横向内间距number16
    zIndexPopup弹窗 z-indexnumber1000

    全局 Token如何定制？