Popover
현재 맥락 옆에 짧은 정보나 조작을 펼칩니다.
- 성숙도
- 후보
- 소스 경로
components/ui/popover.tsx- 소스
- 소스
- 외부 의존성
radix-ui
실제 미리보기
사용할 때
사용 기준
필터나 짧은 설정처럼 페이지 이동이 필요 없는 보조 작업에 씁니다.
사용하지 않을 때
긴 폼, 중요한 확인, 단순 명령 목록에는 각각 Dialog, Alert Dialog, Dropdown Menu를 씁니다.
변형과 상태
closed고정 예시트리거 이름만으로 펼쳐질 내용을 예상할 수 있는지 확인합니다.
open직접 조작화면 가장자리 충돌과 키보드 이동을 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
접근성
제목과 설명으로 보조 화면의 목적을 알리고 Escape와 초점 복귀를 유지합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
open | boolean | 아니요 | 제어되는 열림 상태입니다. |
sideOffset | number | 아니요 | 트리거와 표면 사이 간격입니다. |
align | "start" | "center" | "end" | 아니요 | 트리거 기준 정렬입니다. |
사용 예시
지원 importimport {
Popover,
PopoverTrigger,
PopoverContent,
PopoverTitle,
PopoverDescription,
} from "@/components/ui/popover"
<Popover>
<PopoverTrigger>Filters</PopoverTrigger>
<PopoverContent>
<PopoverTitle>Filters</PopoverTitle>
<PopoverDescription>Narrow results.</PopoverDescription>
</PopoverContent>
</Popover>