Sheet
Sheet는 화면의 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다. 사이드바, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.Resizable
Sheet.ResizeHandle을 Sheet.Popup 안에 넣으면 가장자리 핸들을 잡고 크기를 조절할 수 있습니다.
크기 범위는 별도 prop 없이 Popup의 CSS로 정합니다. 조절되는 축의 min-width/max-width(좌우 Sheet) 또는 min-height/max-height(상하 Sheet)를 지정하면 드래그와 키보드 조작이 그 범위 안에서만 움직입니다. 값은 px나 뷰포트 단위(vw svh dvh)를 권장합니다 — %는 경계 숫자로 해석되지 않을 수 있어, 이 경우 핸들은 범위 제한 없이 동작하되 실제 크기는 CSS가 계속 제한합니다. 범위를 지정하지 않으면 기본값(최소 64px, 최대 뷰포트 크기)이 적용됩니다.
Property
Side
Sheet가 나타날 위치를 설정합니다. 기본값은 'right'입니다.
Controlled State
Sheet의 열림/닫힘 상태를 외부에서 제어합니다.
Keep Mounted
Sheet가 닫혀도 DOM에서 제거되지 않고 유지되도록 설정합니다.
Examples
Custom Usage
유연하게 Sheet를 사용합니다.
Props Table
Sheet.Root
Loading component documentation...
Sheet.Trigger
Loading component documentation...
Sheet.Popup
Loading component documentation...
Sheet.PortalPrimitive
Loading component documentation...
Sheet.OverlayPrimitive
Loading component documentation...
Sheet.PopupPrimitive
Loading component documentation...
Sheet.PositionerPrimitive
Loading component documentation...
Sheet.ResizeHandle
Loading component documentation...
Sheet.Header
Loading component documentation...
Sheet.Body
Loading component documentation...
Sheet.Footer
Loading component documentation...
Sheet.Title
Loading component documentation...
Sheet.Description
Loading component documentation...
Sheet.Close
Loading component documentation...