Popover
dialog 의미, 제목, 설명, 닫기 액션, 위치 지정, 닫기를 갖는 비모달 anchor 콘텐츠예요.
핵심 속성
제어형 open 또는 비제어형 defaultOpen을 사용하세요. Positioner는 Base UI의 side, alignment, offset, collision prop을 받아요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/popover.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRPopover } from '@tinyrack/ui/components/popover';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
배치 방향 고유 링크
각 trigger가 요청한 방향에 실제 anchored popup을 열고 collision을 처리해요.
인라인 정렬 고유 링크
`side`와 별개로 `start`, `center`, `end`를 선택하세요.
제어형 lifecycle, collision, offset 고유 링크
실시간 상태가 제어형 열림 변경을 반영하고 방향과 정렬 오프셋은 인라인 가장자리 근처에서 충돌을 피한 상태를 유지해요.
분리된 trigger handle 고유 링크
타입이 지정된 `handle`이 Root 외부의 트리거를 연결하고 페이로드를 팝업 콘텐츠로 전달해요.
API
Base UI가 anchor 위치 지정, collision 회피, focus 동작, portal, dialog 관계, outside/Escape 닫기를 담당해요. 보조 동작에는 표면을 non-modal로 유지하고, 뒤쪽 page를 가려야 하는 작업에는 TRDialog를 사용하세요.
TRPopover.Root
open 또는 defaultOpen 상태, onOpenChange, modal, imperative actionsRef, trigger ID와 typed handle을 관리하며 DOM 요소는 렌더링하지 않아요.
TRPopover.Trigger
열기 button을 렌더링하며 handle, payload, openOnHover, delay, closeDelay, render, native button prop과 ref를 받아요.
TRPopover.Portal
기본적으로 layer를 document.body로 이동해요. container로 host를 지정하고 keepMounted로 숨겨진 콘텐츠를 유지하세요.
TRPopover.Positioner
side, align, sideOffset, alignOffset, collisionAvoidance, collisionBoundary, collisionPadding, anchor, sticky, disableAnchorTracking, arrowPadding을 받아요.
TRPopover.Popup
non-modal dialog를 렌더링하고 title/description 관계와 open, closed, side, alignment, transition data attribute를 노출해요.
TRPopover.Arrow
배치된 arrow를 렌더링해요. --tr-layer-arrow-size로 크기를 변경하세요.
TRPopover.Backdrop
선택적 backdrop을 렌더링하며 주로 modal 또는 trap-focus 표현에 사용해요.
TRPopover.Title
aria-labelledby를 통해 Popup의 label을 제공해요.
TRPopover.Description
aria-describedby를 통해 Popup을 설명해요.
TRPopover.Close
활성 popover를 닫고 Base UI dismissal 동작에 따라 focus를 복원해요.
TRPopover.Viewport
handle 기반 popover가 여러 trigger 사이에서 전환될 때 animated content transition을 담아요.
TRPopover.createHandle
분리된 trigger용 TRPopoverHandle<Payload>를 만들어요. 같은 handle을 Root와 Trigger에 전달하면 Trigger의 payload가 Root render 함수에 제공돼요.