Popover

Floating UI 기반의 헤드리스 팝오버 컴포넌트. 닫기 처리, CSS 전환을 기본 지원합니다.

데모

팝오버 열기

Show Code

API 레퍼런스

Popover

Prop	Type	Default	Description
children	ReactNode	-	Popover 하위 컴포넌트 (Trigger, Content)
transition	boolean | UseTransitionStylesProps	false	열기/닫기 CSS 전환 활성화
dismiss	UseDismissProps	-	닫기 동작 설정 (외부 클릭, Esc 키)
onOpen	() => void	-	팝오버가 열릴 때 호출 (비제어 모드)
onClose	() => void	-	팝오버가 닫힐 때 호출 (비제어 모드)

Popover.Trigger

Prop	Type	Default	Description
children	ReactElement	-	팝오버를 토글하는 클릭 가능한 요소

Popover.Content

Prop	Type	Default	Description
children	ReactNode | ((props: { floating, interactions }) => ReactNode)	-	표시할 콘텐츠 또는 floating 컨텍스트를 받는 렌더 함수
portal	boolean | FloatingPortalProps	false	포탈에서 콘텐츠 렌더링 (Popover.Content에 전달)
...props	ComponentPropsWithoutRef<"section">	-	모든 네이티브 section 요소 속성