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
Sheet 복합 컴포넌트의 루트. 보충 콘텐츠나 작업을 위해 뷰포트 가장자리에서 밀려 들어오는 패널입니다. 열림 상태를 관리합니다. 자체 HTML 요소를 렌더링하지 않습니다.
| 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
클릭하면 Sheet를 여는 버튼. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
handle? | - | DialogHandle<unknown> |
id? | - | string |
nativeButton? | true | boolean |
payload? | - | unknown |
render? | - | ReactElementfunction |
Sheet.Popup
Sheet.PortalPrimitive, Sheet.OverlayPrimitive, Sheet.PositionerPrimitive, Sheet.PopupPrimitive를 하나의 파트로 합칩니다. 포털, 오버레이, 포지셔너를 바꾸려면 portalElement, overlayElement, positionerElement를 사용하세요. <div> 요소로 렌더링됩니다.
| 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
Sheet를 일반 DOM 계층 밖에 렌더링하는 포털 컨테이너. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
container? | - | HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
Sheet.OverlayPrimitive
Sheet 팝업 뒤에 렌더링되는 반투명 배경. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
forceRender? | false | boolean |
render? | - | ReactElementfunction |
Sheet.PopupPrimitive
Sheet.PositionerPrimitive에 지정한 방향에서 밀려 들어오는 Sheet 패널 자체. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
initialFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
Sheet.PositionerPrimitive
Sheet 팝업을 뷰포트의 선택한 가장자리에 배치합니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
side? | right | bottomleftrighttop |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Sheet.ResizeHandle
Sheet의 안쪽 가장자리에 있는 핸들. 드래그하거나 화살표 키로 Sheet의 크기를 조절합니다. Sheet.Popup 안에 배치하세요. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
disabled? | false | boolean |
step? | 16 | number |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Sheet.Header
Sheet의 상단 영역. 보통 제목과 닫기 버튼을 담습니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Sheet.Body
Sheet의 스크롤 가능한 메인 콘텐츠 영역. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Sheet.Footer
Sheet의 하단 영역. 보통 액션 버튼을 담습니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Sheet.Title
보조기술에 Sheet의 레이블을 알려 주는 제목. <h2> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Sheet.Description
Sheet에 대한 보충 텍스트를 담는 문단. 보조기술에서 Sheet 패널과 연결됩니다. <p> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Sheet.Close
클릭하면 Sheet를 닫는 버튼. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |