Popover

클릭하면 팝업 콘텐츠를 표시하는 컴포넌트입니다. 폼, 설정 등 복잡한 콘텐츠에 적합합니다.

설치

Terminal

npx @msub-core/ui-cli add popover

사용법

TSX

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverClose,
} from "@msub-core/ui/components/popover"

function MyComponent() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>Open Popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        <p>Popover content here</p>
      </PopoverContent>
    </Popover>
  )
}

기본

Prop	Type	Default	Required	Description
open	boolean	-	No	제어 모드 열림 상태
defaultOpen	boolean	false	No	기본 열림 상태
onOpenChange	(open: boolean) => void	-	No	열림 상태 변경 콜백

정렬

위치

PopoverClose

폼 예시

날짜 선택 예시

PopoverContent Props

Prop	Type	Default	Required	Description
align	"start" \| "center" \| "end"	"center"	No	수평 정렬
side	"top" \| "bottom"	"bottom"	No	표시 위치
className	string	-	No	추가 스타일 클래스