Popover

Open

계약

Overview

Machine-readable contract from Component Spec.

component: popoverexport: PopOverversion: 1attributes: data-refineui=popover

Anatomy

Part	data-refineui
root	popover-root

States

Scope	Category	Values
component	environment	forced-colors, dir

Accessibility

Slot	Element	Role
popover	div	dialog

Keyboard

Key	Action	Native
Escape	close	—

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible
behavior	trap	true
behavior	initial	first-focusable
behavior	return	trigger

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { Popover, PopoverTrigger, PopoverContent, Button } from "@refineui/react";

<Popover>
  <PopoverTrigger>
    <Button>Show Info</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Additional information here</p>
  </PopoverContent>
</Popover>

<Popover open={isOpen} onOpenChange={setIsOpen}>
  <PopoverTrigger>
    <Button>Toggle</Button>
  </PopoverTrigger>
  <PopoverContent placement="top" align="center">
    <p>Popover content</p>
  </PopoverContent>
</Popover>

API 레퍼런스

Popover

Prop	Default	Type	Description
open	—	boolean	제어형 열림 상태.
defaultOpen	—	boolean	비제어형 초기 열림 상태.
onOpenChange	—	(open: boolean) => void	열림 상태 변경 시 이벤트 핸들러.

PopoverTrigger

팝오버를 여는 트리거 요소.

PopoverContent

Prop	Default	Type	Description
placement	"bottom"	"top" | "bottom" | "left" | "right"	트리거 기준 위치.
align	"center"	"start" | "center" | "end"	가장자리 기준 정렬.