Popover
Popover는 트리거 요소 근처에 부가 정보나 상호작용 콘텐츠를 표시하는 오버레이 컴포넌트입니다. 툴팁, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.Property
PositionerProps
Popover가 나타날 위치와 정렬을 설정합니다.
Offset
Popover와 트리거 간의 거리를 조정합니다.
Examples
Content Variations
간단한 텍스트부터 복잡한 상호작용 요소까지 다양한 콘텐츠를 표시합니다.
Props Table
Popover.Root
Popover 복합 컴포넌트의 루트. 트리거에 고정된 플로팅 패널로 상호작용 가능한 콘텐츠를 표시합니다. 열림 상태를 관리합니다. 자체 HTML 요소를 렌더링하지 않습니다.
| Prop | Default | Type |
|---|---|---|
defaultOpen? | false | boolean |
onOpenChange? | - | function |
open? | - | boolean |
actionsRef? | - | React.RefObject<Popover.Root.Actions | null> |
children? | - | ReactNodefunction |
defaultTriggerId? | - | stringnull |
handle? | - | PopoverHandle<unknown> |
modal? | false | booleantrap-focus |
onOpenChangeComplete? | - | function |
triggerId? | - | stringnull |
Popover.Trigger
클릭하면 Popover를 여는 버튼. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
closeDelay? | 0 | number |
delay? | 300 | number |
handle? | - | PopoverHandle<unknown> |
nativeButton? | true | boolean |
openOnHover? | false | boolean |
payload? | - | unknown |
render? | - | ReactElementfunction |
Popover.Popup
Popover.PortalPrimitive, Popover.PositionerPrimitive, Popover.PopupPrimitive를 하나의 파트로 합칩니다. 포털이나 포지셔너를 대체하려면 portalElement 또는 positionerElement를 사용하세요. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
portalElement? | - | ReactElement<PopoverPortalPrimitive.Props> |
positionerElement? | - | ReactElement<PopoverPositionerPrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
initialFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
Popover.PortalPrimitive
일반 DOM 계층 밖에 Popover를 렌더링하는 포털 컨테이너. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
container? | - | HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
Popover.PositionerPrimitive
Popover 팝업을 트리거 기준으로 배치하고 뷰포트 안에 유지합니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
align? | center | centerendstart |
alignOffset? | 0 | numberfunction |
anchor? | - | ElementVirtualElementReact.RefObject<Element | null>functionnull |
arrowPadding? | 5 | number |
collisionAvoidance? | - | CollisionAvoidance |
collisionBoundary? | clipping-ancestors | Boundary |
collisionPadding? | 5 | Padding |
disableAnchorTracking? | false | boolean |
positionMethod? | absolute | fixedabsolute |
side? | bottom | bottomleftrighttopinline-endinline-start |
sideOffset? | 10 | numberfunction |
sticky? | false | boolean |
render? | - | ReactElementfunction |
Popover.PopupPrimitive
트리거를 가리키는 화살표가 있는 Popover 패널. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
initialFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
Popover.Title
보조기술에 Popover의 레이블을 알리는 제목. <h2> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Popover.Description
Popover에 대한 보충 텍스트를 담은 문단. 보조기술을 위해 Popover 패널과 연결됩니다. <p> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Popover.Close
클릭하면 Popover를 닫는 버튼. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |