Hover Card

마우스를 올리면 미리보기 카드가 표시되는 컴포넌트입니다.

설치

Terminal

npx @msub-core/ui-cli add hover-card

사용법

TSX

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@msub-core/ui/components/hover-card"

function MyComponent() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@username</Button>
      </HoverCardTrigger>
      <HoverCardContent>
        <p>사용자 정보</p>
      </HoverCardContent>
    </HoverCard>
  )
}

기본

Prop	Type	Default	Required	Description
open	boolean	-	No	제어 모드 열림 상태
defaultOpen	boolean	false	No	기본 열림 상태
onOpenChange	(open: boolean) => void	-	No	열림 상태 변경 콜백
openDelay	number	200	No	열림 지연 시간 (ms)
closeDelay	number	300	No	닫힘 지연 시간 (ms)

위치

Prop	Type	Default	Required	Description
side	"top" \| "bottom" \| "left" \| "right"	"bottom"	No	카드 표시 위치
align	"start" \| "center" \| "end"	"center"	No	정렬 방식
sideOffset	number	8	No	트리거로부터의 거리 (px)

사용자 프로필

문의사항은 에게 연락하세요.