Side Panel
페이지 맥락을 유지한 채 가장자리에서 넓은 작업 공간을 엽니다.
- 성숙도
- 후보
- 소스 경로
components/ui/side-panel.tsx- 소스
- 소스
- 외부 의존성
@phosphor-icons/reactradix-ui
실제 미리보기
사용할 때
사용 기준
설정, 상세 정보, 편집처럼 Popover보다 넓은 보조 작업에 씁니다.
사용하지 않을 때
핵심 페이지 흐름이나 여러 단계 작업을 패널에 가두지 않습니다.
변형과 상태
closed고정 예시트리거가 보조 작업임을 분명히 하는지 확인합니다.
open직접 조작본문과 패널의 경계, 내부 스크롤과 닫기 동작을 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
접근성
Dialog의 제목, 설명, 초점 가두기, Escape 닫기와 초점 복귀를 유지합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | 아니요 | 패널이 들어오는 화면 가장자리입니다. |
closeLabel | string | 예 | 닫기 아이콘의 접근 가능한 이름입니다. |
open | boolean | 아니요 | 제어되는 열림 상태입니다. |
사용 예시
지원 importimport {
SidePanel,
SidePanelTrigger,
SidePanelContent,
SidePanelTitle,
SidePanelDescription,
} from "@/components/ui/side-panel"
<SidePanel>
<SidePanelTrigger>Settings</SidePanelTrigger>
<SidePanelContent closeLabel="Close">
<SidePanelTitle>Settings</SidePanelTitle>
<SidePanelDescription>Manage the workspace.</SidePanelDescription>
</SidePanelContent>
</SidePanel>