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=` 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
| Properties | Instructions | type | Default | Version |
|---|---|---|---|---|
| afterVisibleChange | Callback function when animation of SideSheet ends | (isVisble: boolean) => void | - | 1.0.0 |
| bodyStyle | Content style | CSSProperties | - | - |
| className | Class name | string | - | - |
| closable | Toggle whether to show close button | boolean | true | - |
| closeOnEsc | oggle whether to allow close modal by keyboard event Esc | boolean | false | 1.0.0 |
| disableScroll | Toggle whether to add overflow: hidden to document.body element. Only works when not setting getPopupContainer | boolean | true | - |
| footer | Footer | ReactNode | null | 1.3.0 |
| getPopupContainer | Container where to render SideSheet inside, you need to set 'position: relative` | () => HTMLElement | - | 0.29.0 |
| headerStyle | Header style | CSSProperties | - | 1.0.0 |
| height | Height, takes effect when placement is set to top or bottom | number | string | 400 | - |
| keepDOM | Keep components inside when closing sideSheet v1.18.0 provided | boolean | false | |
| mask | Toggle whether to show mask. After v0.29.0, when mask={false}, you could continue operations outside SideSheet | boolean | true | - |
| maskClosable | Toggle whether to allow closing when clicking mask | boolean | true | - |
| maskStyle | Mask style | CSSProperties | - | - |
| motion | Toggle whether to turn on animation | object | boolean | true | - |
| placement | Sliding position, one of top, bottom, left, right | string | right | - |
| size | Size, one of small(400px)， medium(684px), large(920px), only take effects when placement is set to left or right | string | small | 0.29.0 |
| style | Inline style | CSSProperties | - | - |
| title | Title | ReactNode | - | - |
| visible | Toggle visibility of the SideSheet | boolean | false | - |
| width | Width, takes effect when placement is set to left or right | number | string | 448 | - |
| zIndex | Z-index value for SideSheet | number | 1000 | 0.29.0 |
| onCancel | Callback function when clicking cancel button | (e: MouseEvent) => void | - | - |
Accessibility
ARIA
- SideSheet has a
dialogrole to indicate that it is a pop-up component, and the internal header has aheadingrole to indicate that it is a header.
