代码演示

如何引入

import { SideSheet } from '@kousum/semi-ui-vue';

基本

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

自定义位置

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

自定义尺寸

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

可操作的外部区域

在 0.29.0 版本之后，当 mask={false}时允许对外部区域进行操作。

注意

当 SideSheet 是默认渲染在 body 中时（即不传入 getPopupContainer 参数），会在打开时自动给 body 添加 overflow: hidden 来禁止滚动。如果你希望外部区域依然可滚动，可以将 disableScroll 设为false

渲染在指定容器

可以通过 getPopupContainer 指定父级 DOM，弹层将会渲染至该 DOM 中， 0.29.0 版本之后支持。

注意

容器需要手动设置样式 `overflow: hidden`，否则会导致动画溢出

自定义内容区域

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

API 参考

属性	说明	类型	默认值	版本
afterVisibleChange	面板展示/隐藏时动画结束触发的回调	(isVisble: boolean) => void	-	1.0.0
bodyStyle	面板内容的样式	CSSProperties	-	-
className	类名	string	-	-
closable	是否允许通过右上角的关闭按钮关闭	boolean	true	-
closeIcon	关闭按钮的 icon	ReactNode	<IconClose />	-
closeOnEsc	允许通过键盘事件 Esc 触发关闭	boolean	false	1.0.0
disableScroll	默认渲染在 document.body 层时是否禁止 body 的滚动，即给 body 添加 overflow: hidden	boolean	true	-
footer	侧边栏底部	ReactNode	null	1.3.0
getPopupContainer	指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 position: relative 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。	() => HTMLElement	-	0.29.0
headerStyle	面板头部的样式	CSSProperties	-	1.0.0
height	高度，位置为 top 或 bottom 时生效	number | string	400	-
keepDOM	关闭 SideSheet 时是否保留内部组件不销毁	boolean	false	1.18.0
mask	是否显示遮罩，在 0.29.0 版本之后，当 mask={false} 时允许对外部区域进行操作	boolean	true	-
maskClosable	是否允许通过点击遮罩来关闭面板	boolean	true	-
maskStyle	遮罩的样式	CSSProperties	-	-
motion	是否允许动画	boolean	true	-
placement	侧边栏滑出位置，支持top, bottom, left, right	string	right	-
size	尺寸，支持 small(448px)， medium(684px), large(920px)，仅在 left 或 right 时生效	string	small	0.29.0
style	可用于设置样式	CSSProperties	-	-
title	面板的标题	ReactNode	-	-
visible	面板是否可见	boolean	false	-
width	宽度，位置为 left 或 right 时生效	number | string	448	-
zIndex	弹层 z-index 值	number	1000	0.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} 允许滚动。