展示类 · SideSheet
滑动侧边栏
可从屏幕边沿滑出的浮层面板,通常用于承载二级操作页面

代码演示

如何引入

基本

默认侧边栏从右滑出,支持点击遮罩区关闭。

自定义位置

可以通过设置 placement 属性设置侧边栏滑出位置,支持top, bottom, left, right

自定义尺寸

可以通过设置 size 属性设置侧边栏尺寸,支持 small(400px), medium(684px), large(920px),仅在 placementleftright 时生效。 0.29.0 版本之后支持。若默认的尺寸不满足你的需求,你还可以通过设置 width 属性自行设置宽度,例如 width={900} / width={'800px'}

可操作的外部区域

0.29.0 版本之后,当 mask={false}时允许对外部区域进行操作。
注意
当 SideSheet 是默认渲染在 body 中时(即不传入 getPopupContainer 参数),会在打开时自动给 body 添加 `overflow: hidden` 来禁止滚动,可以配合 `disableScroll=` 允许滚动。

渲染在指定容器

可以通过 getPopupContainer 指定父级 DOM,弹层将会渲染至该 DOM 中, 0.29.0 版本之后支持。
注意
容器需要手动设置样式 `overflow: hidden`,否则会导致动画溢出

自定义内容区域

可以通过自定义 titlefooter(v>=1.3.0) 等创建出丰富的内容样式。

API 参考

属性说明类型默认值版本
afterVisibleChange面板展示/隐藏时动画结束触发的回调(isVisble: boolean) => void-1.0.0
bodyStyle面板内容的样式CSSProperties--
className类名string--
closable是否允许通过右上角的关闭按钮关闭booleantrue-
closeOnEsc允许通过键盘事件 Esc 触发关闭booleanfalse1.0.0
disableScroll默认渲染在 document.body 层时是否禁止 body 的滚动,即给 body 添加 overflow: hiddenbooleantrue-
footer侧边栏底部ReactNodenull1.3.0
getPopupContainer指定父级 DOM,弹层将会渲染至该 DOM 中,自定义需要设置 position: relative() => HTMLElement-0.29.0
headerStyle面板头部的样式CSSProperties-1.0.0
height高度,位置为 topbottom 时生效number | string400-
keepDOM关闭 SideSheet 时是否保留内部组件不销毁booleanfalse1.18.0
mask是否显示遮罩,在 0.29.0 版本之后,当 mask={false} 时允许对外部区域进行操作booleantrue-
maskClosable是否允许通过点击遮罩来关闭面板booleantrue-
maskStyle遮罩的样式CSSProperties--
motion是否允许动画object | booleantrue-
placement侧边栏滑出位置,支持top, bottom, left, rightstringright-
size尺寸,支持 small(448px), medium(684px), large(920px),仅在 leftright 时生效stringsmall0.29.0
style可用于设置样式CSSProperties--
title面板的标题ReactNode--
visible面板是否可见booleanfalse-
width宽度,位置为 leftright 时生效number | string448-
zIndex弹层 z-index 值number10000.29.0
onCancel取消面板时的回调函数(e: MouseEvent) => void--

Accessibility

ARIA

  • SideSheet 具有 dialog role 来表示它是一个弹窗组件, 内部 header 具有 heading role 表明是 header。

设计变量

FAQ:

  • SideSheet 会自动禁止 body 的滚动吗?当 SideSheet 是默认渲染在 body 中时(即不传入 getPopupContainer 参数),会在打开时自动给 body 添加 overflow: hidden 来禁止滚动。可以通过 disableScroll={false} 允许滚动。

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED