Sheet
Sheet는 화면의 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다. 사이드바, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.Property
Side
Sheet가 나타날 위치를 설정합니다. 기본값은 'right'입니다.
Controlled State
Sheet의 열림/닫힘 상태를 외부에서 제어합니다.
Keep Mounted
Sheet가 닫혀도 DOM에서 제거되지 않고 유지되도록 설정합니다.
Examples
Custom Usage
유연하게 Sheet를 사용합니다.
Resizable
Sheet의 크기를 자유자재로 조절하길 원한다면 <Sheet.ResizeHandle />을 사용하세요.
조절 가능 영역을 제한하고 싶다면 <Sheet.Popup /> 컴포넌트에 min/max-height, min/max-width 속성을 적용하세요.
Props Table
Sheet.Root
Root of the Sheet compound component, a panel that slides in from an edge of the viewport for supplementary content or tasks. Manages the open state. Doesn't render its own HTML element.
| Prop | Default | Type |
|---|---|---|
defaultOpen? | false | boolean |
onOpenChange? | - | function |
open? | - | boolean |
closeOnClickOverlay? | - | boolean |
actionsRef? | - | React.RefObject<Sheet.Root.Actions | null> |
children? | - | ReactNodefunction |
defaultTriggerId? | - | stringnull |
handle? | - | DialogHandle<unknown> |
modal? | true | booleantrap-focus |
onOpenChangeComplete? | - | function |
triggerId? | - | stringnull |
Sheet.Trigger
Button that opens the sheet when clicked. Renders a <button> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
handle? | - | DialogHandle<unknown> |
id? | - | string |
nativeButton? | true | boolean |
payload? | - | unknown |
render? | - | ReactElementfunction |
Sheet.Popup
Combines Sheet.PortalPrimitive, Sheet.OverlayPrimitive, Sheet.PositionerPrimitive, and Sheet.PopupPrimitive into a single part. Use portalElement, overlayElement, or positionerElement to replace the portal, overlay, or positioner. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
overlayElement? | - | ReactElement<SheetOverlayPrimitive.Props> |
portalElement? | - | ReactElement<SheetPortalPrimitive.Props> |
positionerElement? | - | ReactElement<SheetPositionerPrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
initialFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
Sheet.PortalPrimitive
Portal container that renders the sheet outside the normal DOM hierarchy. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
container? | - | HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
Sheet.OverlayPrimitive
Semi-transparent backdrop rendered behind the sheet popup. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
forceRender? | false | boolean |
render? | - | ReactElementfunction |
Sheet.PopupPrimitive
The sheet panel itself, which slides in from the side set on Sheet.PositionerPrimitive. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
initialFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
Sheet.PositionerPrimitive
Places the sheet popup against the chosen edge of the viewport. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
side? | right | bottomleftrighttop |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Sheet.ResizeHandle
Handle on the inner edge of the sheet that resizes it by dragging or with the arrow keys. Place it inside Sheet.Popup. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
disabled? | false | boolean |
step? | 16 | number |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Sheet.Header
Top section of the sheet, typically containing the title and a close button. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Sheet.Body
Scrollable main content area of the sheet. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Sheet.Footer
Bottom section of the sheet, typically containing action buttons. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Sheet.Title
Heading that labels the sheet for assistive technologies. Renders an <h2> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Sheet.Description
Paragraph that provides supplementary text for the sheet, linked to the sheet panel for assistive technologies. Renders a <p> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Sheet.Close
Button that closes the sheet when clicked. Renders a <button> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |