Popover

부가 정보를 표시하는 팝오버 컴포넌트입니다.

개요

Popover는 트리거 요소 주변에 콘텐츠를 표시하는 컴포넌트입니다. iCignal Popover는 iCignal 브랜드 스타일이 적용되어 있으며, 대시보드 데이터 상세 정보와 빠른 액션을 제공합니다. Foundation Popover의 모든 기능을 상속합니다.

주요 특징:

위치 자동 조정
클릭/호버 트리거
닫기 버튼
iCignal 브랜드 스타일

사용 사례:

iCignal 데이터 포인트 상세 정보
빠른 필터 메뉴
차트 범례 설명
추가 액션 메뉴

알림: 이 컴포넌트는 현재 구현 중입니다.

설치


# Coming Soon
# npx @vortex/cli add popover --package icignal

기본 사용법


import "@vortex/ui-icignal/theme"; // iCignal 테마 적용
import { Popover, PopoverTrigger, PopoverContent } from "@vortex/ui-icignal";
import { Button } from "@vortex/ui-icignal";
 
export default function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>열기</Button>
      </PopoverTrigger>
      <PopoverContent>
        <p>팝오버 내용</p>
      </PopoverContent>
    </Popover>
  );
}

iCignal 브랜딩

iCignal 특화 사용 가이드

데이터 포인트 상세 정보:


import { Popover, PopoverTrigger, PopoverContent } from "@vortex/ui-icignal";
import { Info } from "lucide-react";
 
<Popover>
  <PopoverTrigger asChild>
    <button className="text-icignal-blue hover:underline">
      15,234 방문자
      <Info size={12} className="ml-xs" />
    </button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="p-sm">
      <h4 className="font-semibold mb-sm">방문자 상세</h4>
      <dl className="text-sm space-y-xs">
        <div className="flex justify-between">
          <dt>신규 방문자</dt>
          <dd className="font-medium">8,421 (55.2%)</dd>
        </div>
        <div className="flex justify-between">
          <dt>재방문자</dt>
          <dd className="font-medium">6,813 (44.8%)</dd>
        </div>
      </dl>
    </div>
  </PopoverContent>
</Popover>;

빠른 필터 메뉴:


import { Popover, PopoverTrigger, PopoverContent } from "@vortex/ui-icignal";
import { Filter, Checkbox } from "@vortex/ui-icignal";
 
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline" size="sm">
      <Filter size={16} className="mr-xs" />
      필터
    </Button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="p-md space-y-sm">
      <h4 className="font-semibold mb-sm">데이터 소스</h4>
      <Checkbox label="웹사이트" defaultChecked />
      <Checkbox label="모바일 앱" defaultChecked />
      <Checkbox label="API" />
    </div>
  </PopoverContent>
</Popover>;

Foundation과의 차이점

속성	Foundation	iCignal
스타일	중립적	iCignal 브랜드
사용 맥락	범용	Analytics 데이터 상세
테마	중립적 테마	iCignal 테마 (`@vortex/ui-icignal/theme`)

Props API

Prop	Type	Default	Description
side	’top’ \| ‘right’ \| ‘bottom’ \| ‘left'	'bottom’	표시 위치
align	’start’ \| ‘center’ \| ‘end'	'center’	정렬