JenniferSoft Design Docs

Appearance

Popover ​

사용자에게 추가 정보나 확인을 요청하는 팝오버 컴포넌트입니다. title, content props로 기본 스타일을 적용하거나, 슬롯을 통해 자유롭게 커스터마이징할 수 있습니다.

Interactive Playground ​

아래에서 각 props를 직접 조작하며 컴포넌트를 테스트해보세요.

Props 설정
top
left
미리보기
버튼에 마우스를 올려보세요
vue
<script setup lang="ts">
import { ref } from 'vue';
import { Popover, Btn } from '@jennifersoft/vue-components-v2';

const anchorRef = ref<HTMLElement | null>(null);
</script>

<template>
    <Btn ref="anchorRef" text="Hover me" type="primary-filled" />
    <Popover
        v-model:anchor="anchorRef"
        title="제목"
        content="팝오버 내용입니다."
        :left-button="{ text: '확인', onClick: () => console.log('확인') }"
        :right-button="{ text: '취소', onClick: () => console.log('취소') }"
        placement="bottom"
    />
</template>

Props ​

Prop타입필수기본값설명
v-model:anchorHTMLElement | ComponentPublicInstance | null✓null기준 요소 (hover 시 자동으로 팝오버 표시)
titlestring--팝오버 제목 (기본 스타일 적용)
contentstring--팝오버 내용 (기본 스타일 적용)
leftButton{ text: string; type?: ButtonType; onClick?: () => void }--왼쪽 버튼
rightButton{ text: string; type?: ButtonType; onClick?: () => void }--오른쪽 버튼
placement'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | ...-'bottom'팝오버 위치
offset{ x?: number; y?: number }--위치 오프셋
overlayStyleRecord<string, string>--팝오버 컨테이너 스타일
showArrowboolean-true화살표 표시 여부
hideDelaynumber-100마우스가 벗어난 후 팝오버가 사라지기까지의 지연 시간(ms)
buttomAlign'left' | 'right'-'left'버튼 정렬 방향

Events ​

EventPayload설명
close-팝오버가 닫힐 때 (버튼 클릭 시) 발생

Slots ​

title, content props 대신 슬롯을 사용하면 완전히 커스터마이징할 수 있습니다.

Slot설명
title제목 영역 커스터마이징 (title prop 대신 사용)
content내용 영역 커스터마이징 (content prop 대신 사용)

슬롯 사용 예시 ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { Popover, Btn, StatusIndicator } from '@jennifersoft/vue-components-v2';

const anchorRef = ref<HTMLElement | null>(null);
</script>

<template>
    <Btn ref="anchorRef" text="Hover me" type="primary-filled" />
    <Popover v-model:anchor="anchorRef" placement="top-left" :hide-delay="0">
        <template #title>
            <div class="flex items-center gap-1">
                <span>Established</span>
                <StatusIndicator color="error" size="small">
                    False
                </StatusIndicator>
            </div>
        </template>
        <template #content>
            <div class="flex flex-col gap-1">
                <div class="flex flex-col">
                    <span style="color: var(--red-800);">
                        InitialNamesAccepted
                    </span>
                    <span style="color: var(--gray-600);">
                        ReplicaSet "nerver-create-pod-585c6597" has timed out
                        progressing.
                    </span>
                </div>
                <span style="color: var(--gray-500); font-size: 0.75rem;">
                    2025-08-27 05:03:59
                </span>
            </div>
        </template>
    </Popover>
</template>