Skip to content
Docs
컴포넌트로 돌아가기

Popover

@hua-labs/ui
v1.1.0

추가 콘텐츠나 인터랙티브 폼을 표시하기 위한 플로팅 패널 컴포넌트입니다.

설치

bash
npm install @hua-labs/hua
Import
tsx
import { Popover } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 Popover

위치 옵션

정렬 옵션

폼 포함

아이콘 트리거

도움이 필요하신가요?

제어 모드

상태: 닫힘

Props

이름타입기본값설명
children*React.ReactNode-Popover 내용
trigger*React.ReactNode-Popover를 열기 위한 트리거 요소
openboolean-제어 모드 열림 상태
onOpenChange(open: boolean) => void-열림 상태 변경 시 콜백
position"top" | "bottom" | "left" | "right""bottom"Popover 위치
align"start" | "center" | "end""center"Popover 정렬
offsetnumber8트리거와 Popover 사이 간격 (px)
disabledbooleanfalsePopover 비활성화

코드 예시

기본 사용법tsx
1// Via framework (recommended)
2import { Popover } from '@hua-labs/ui';
3import { Button } from '@hua-labs/ui';
4// Or direct import
5// import { Popover } from '@hua-labs/ui/overlay';
6 
7<Popover trigger={<Button>Open</Button>}>
8  <p>This is the popover content.</p>
9</Popover>
위치 옵션tsx
1<Popover trigger={<Button>Top</Button>} position="top">
2  <p>Content above the trigger</p>
3</Popover>
4 
5<Popover trigger={<Button>Right</Button>} position="right">
6  <p>Content to the right</p>
7</Popover>
폼 Popovertsx
1<Popover trigger={<Button>Edit</Button>}>
2  <div className="space-y-4">
3    <h4 className="font-medium">Edit Item</h4>
4    <Input placeholder="Name" />
5    <Button size="sm">Save</Button>
6  </div>
7</Popover>
제어 모드tsx
1const [open, setOpen] = useState(false);
2 
3<Popover
4  open={open}
5  onOpenChange={setOpen}
6  trigger={<Button>Controlled</Button>}
7>
8  <p>Controlled popover content</p>
9  <Button size="sm" onClick={() => setOpen(false)}>
10    Close
11  </Button>
12</Popover>

관련 컴포넌트

  • Tooltip - 호버 시 간단한 텍스트 표시
  • Dropdown - 메뉴 항목 선택용
  • Modal - 전체 화면 오버레이 다이얼로그

접근성

  • •외부 클릭: 외부 클릭 시 Popover 닫힘
  • •포커스 관리: 키보드 사용자를 위한 콘텐츠 포커스 가능
  • •화살표 표시: 트리거를 가리키는 시각적 화살표