Panel
관련된 정보와 동작을 하나의 명확한 경계 안에 구성합니다.
- 성숙도
- 후보
- 소스 경로
components/ui/panel.tsx- 소스
- 소스
실제 미리보기
배포 설정
공개 전에 환경과 상태를 확인합니다.
준비됨
사용할 때
사용 기준
설정 묶음, 요약 모듈처럼 콘텐츠의 독립된 경계가 실제로 필요할 때 씁니다.
사용하지 않을 때
모든 섹션과 목록 행을 감싸거나 Panel 안에 Panel을 중첩하지 않습니다.
변형과 상태
default고정 예시Paper 면과 1px 경계가 주변 콘텐츠와 구분되는지 확인합니다.
배포 설정
공개 전에 환경과 상태를 확인합니다.
준비됨subtle고정 예시옅은 파란 면이 내용보다 먼저 튀지 않는지 확인합니다.
배포 설정
공개 전에 환경과 상태를 확인합니다.
준비됨inverse고정 예시Ink 면에서 제목, 설명, 상태의 대비를 확인합니다.
배포 설정
공개 전에 환경과 상태를 확인합니다.
준비됨action고정 예시좁은 화면에서 제목과 동작이 한 열로 자연스럽게 쌓이는지 확인합니다.
배포 설정
공개 전에 환경과 상태를 확인합니다.
준비됨
접근성
독립된 영역이면 aria-label 또는 aria-labelledby로 이름을 붙이고 제목 단계는 문서 구조에 맞춥니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
tone | "default" | "subtle" | "inverse" | 아니요 | 주변 표면과 정보 위계에 맞는 면 색입니다. |
aria-label / aria-labelledby | string | 아니요 | 독립된 영역으로 노출할 때 쓰는 접근 가능한 이름입니다. |
children | ReactNode | 아니요 | Header, Content, Footer 등 조합할 Panel 부분입니다. |
PanelTitle as | "h2" | "h3" | "h4" | 아니요 | 주변 문서 구조에 맞는 제목 단계입니다. 기본값은 h3입니다. |
사용 예시
지원 importimport {
Panel,
PanelContent,
PanelDescription,
PanelHeader,
PanelTitle,
} from "@/components/ui/panel"
<Panel aria-labelledby="settings-title" tone="subtle">
<PanelHeader>
<PanelTitle id="settings-title">Notification settings</PanelTitle>
<PanelDescription>Choose which updates to receive.</PanelDescription>
</PanelHeader>
<PanelContent>...</PanelContent>
</Panel>