팝오버

버튼을 누르면 화면 위에 풍부한 콘텐츠를 포털로 띄워 주는 컴포넌트예요. 간단한 폼이나 추가 정보, 작은 안내문처럼 주변 요소 위에 얹어서 보여줘야 할 때 사용해요. 클릭을 통해 열고 닫는 드롭다운과 비슷하지만, 더 자유로운 콘텐츠를 담을 수 있어요.

출처: 문서

본문

CLI Manual

npx shadcn@latest add popover

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-popover

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

컴포넌트를 import 하고,

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

다음 구조로 조립하면 돼요. PopoverTrigger가 팝오버를 여는 버튼 역할을 하고, PopoverContent 안에 실제로 보여줄 콘텐츠를 넣어요.

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>Place content for the popover here.</PopoverContent>
</Popover>