Show · SideSheet
SideSheet
An overlay panel that slides out from the edge of the screen, typically used to host secondary action pages.

Demos

How to import

Basic Usage

By default, SideSheet slides from the right side of the screen and could be closed by clicking on the mask.

Placement

You could use placement to set the position from which SideSheet comes in, supporting one of top, bottom, left, right。

Size

You could use size to set the size of SideSheet, supporting one of small(448px), medium(684px), and large(920px). Only takes effects when placement is set to left or right, and used after v0.29.0. If the default size does not meet your needs, you can also set the width by setting the width property, for example width={900} / width={'800px'}

Non-blocking Workflow

After v0.29.0, you could set mask={false} to continue working on the area outside SideSheet.
Tips
By default, if you are not setting `getPopupContainer`, SideSheet is rendered inside body. If you want body element to be able to scroll, you could set disableScroll to false and the component will not add `overflow: hidden` to it.

Rendered Inside Container

After v0.29.0, you could use getPopupContainer to render SideSheet in targeted DOM.
Tips
The container must have `overflow: hidden` to avoid animated SideSheet overflows.

Customized Content

Use title, footer(v>=1.3.0) and other Semi Components, you could create customized information display layers.

API Reference

PropertiesInstructionstypeDefaultVersion
afterVisibleChangeCallback function when animation of SideSheet ends(isVisble: boolean) => void-1.0.0
bodyStyleContent styleCSSProperties--
classNameClass namestring--
closableToggle whether to show close buttonbooleantrue-
closeOnEscoggle whether to allow close modal by keyboard event Escbooleanfalse1.0.0
disableScrollToggle whether to add overflow: hidden to document.body element. Only works when not setting getPopupContainerbooleantrue-
footerFooterReactNodenull1.3.0
getPopupContainerContainer where to render SideSheet inside, you need to set 'position: relative`() => HTMLElement-0.29.0
headerStyleHeader styleCSSProperties-1.0.0
heightHeight, takes effect when placement is set to top or bottomnumber | string400-
keepDOMKeep components inside when closing sideSheet
v1.18.0 provided		booleanfalse
maskToggle whether to show mask. After v0.29.0, when mask={false}, you could continue operations outside SideSheetbooleantrue-
maskClosableToggle whether to allow closing when clicking maskbooleantrue-
maskStyleMask styleCSSProperties--
motionToggle whether to turn on animationbooleantrue-
placementSliding position, one of top, bottom, left, rightstringright-
sizeSize, one of small(400px)， medium(684px), large(920px), only take effects when placement is set to left or rightstringsmall0.29.0
styleInline styleCSSProperties--
titleTitleReactNode--
visibleToggle visibility of the SideSheetbooleanfalse-
widthWidth, takes effect when placement is set to left or rightnumber | string448-
zIndexZ-index value for SideSheetnumber10000.29.0
onCancelCallback function when clicking cancel button(e: MouseEvent) => void--

Accessibility

ARIA

  • SideSheet has a dialog role to indicate that it is a pop-up component, and the internal header has a heading role to indicate that it is a header.

Design Tokens