JenniferSoft Design Docs

Appearance

PopoverBalloon ​

위치 기반 팝오버 말풍선 컴포넌트입니다.

개요 ​

PopoverBalloon은 특정 요소 주변에 말풍선 형태의 팝오버를 표시하는 컴포넌트입니다. HTML 콘텐츠를 지원하며, 다양한 위치와 스타일링 옵션을 제공합니다.

Props ​

typescript
interface Props {
    content: string; // HTML 문자열 지원
    position?: PopoverPosition; // 위치 (기본: 'right')
    offset?: number; // 오프셋 (기본: 10px)
    cursorNone?: boolean; // 화살표 숨김 (기본: false)
    contentPadding?: number; // 콘텐츠 패딩 (기본: 24px)
}

type PopoverPosition =
    | 'top'
    | 'top-left'
    | 'top-right'
    | 'bottom'
    | 'bottom-left'
    | 'bottom-right'
    | 'left'
    | 'right';

기본 사용법 ​

vue
<template>
    <div
        class="trigger"
        @mouseover="showPopover = true"
        @mouseleave="showPopover = false"
    >
        마우스를 올려보세요
        <PopoverBalloon
            v-if="showPopover"
            content="<strong>팝오버</strong> 내용입니다."
            position="top"
            :offset="15"
        />
    </div>
</template>

<script setup>
import { PopoverBalloon } from '@jennifersoft/apm-components';
import { ref } from 'vue';

const showPopover = ref(false);
</script>

위치 옵션 ​

  • top, top-left, top-right: 상단 배치
  • bottom, bottom-left, bottom-right: 하단 배치
  • left, right: 좌/우측 배치

TooltipBalloon ​

간단한 툴팁 말풍선 컴포넌트입니다.

개요 ​

TooltipBalloon은 PopoverBalloon의 경량화 버전으로, 간단한 텍스트 툴팁을 표시할 때 사용합니다.

Props ​

typescript
interface Props {
    text: string; // 툴팁 텍스트
    position?: TooltipPosition; // 위치 (기본: 'top')
    visible?: boolean; // 표시 여부 (기본: false)
}

기본 사용법 ​

vue
<template>
    <div class="tooltip-container">
        <button
            @mouseover="showTooltip = true"
            @mouseleave="showTooltip = false"
        >
            버튼
        </button>
        <TooltipBalloon
            text="버튼을 클릭하세요"
            position="top"
            :visible="showTooltip"
        />
    </div>
</template>

NodeTooltip ​

노드 요소용 전용 툴팁 컴포넌트입니다.

개요 ​

NodeTooltip은 토폴로지나 관계 트리의 노드에 표시되는 전용 툴팁입니다. 노드의 메트릭 정보를 구조화된 형태로 표시합니다.

Props ​

typescript
interface Props {
    width: number; // 노드 너비
    x: number; // X 좌표
    y: number; // Y 좌표
    translateX: number; // X 변환값
    translateY: number; // Y 변환값
    data: NodeData; // 노드 데이터
    cursorNone?: boolean; // 커서 숨김
    scale?: number; // 스케일 (기본: 1)
    useSimpleTooltip?: boolean; // 간단한 툴팁 모드
}

기본 사용법 ​

vue
<template>
    <NodeTooltip
        :width="nodeWidth"
        :x="nodePosition.x"
        :y="nodePosition.y"
        :translate-x="viewportTranslateX"
        :translate-y="viewportTranslateY"
        :data="nodeData"
        :scale="currentScale"
        :use-simple-tooltip="false"
    />
</template>

TextInNode ​

노드 내부에 표시되는 텍스트 컴포넌트입니다.

개요 ​

TextInNode는 토폴로지나 관계 트리의 노드 내부에 텍스트를 표시하는 컴포넌트입니다. 텍스트 길이에 따른 자동 줄바꿈과 말줄임표를 지원합니다.

Props ​

typescript
interface Props {
    text: string; // 표시할 텍스트
    maxWidth?: number; // 최대 너비 (기본: 무제한)
    fontSize?: number; // 폰트 크기 (기본: 14px)
    textAlign?: 'left' | 'center' | 'right'; // 텍스트 정렬 (기본: 'center')
    ellipsis?: boolean; // 말줄임표 사용 (기본: true)
}

기본 사용법 ​

vue
<template>
    <div class="node">
        <TextInNode
            :text="nodeName"
            :max-width="120"
            :font-size="12"
            text-align="center"
            :ellipsis="true"
        />
    </div>
</template>

<script setup>
import { TextInNode } from '@jennifersoft/apm-components';

const nodeName = ref('Very Long Node Name That Should Be Truncated');
</script>

공통 사용 패턴 ​

호버 툴팁 패턴 ​

vue
<template>
    <div
        class="interactive-element"
        @mouseenter="showTooltip = true"
        @mouseleave="showTooltip = false"
    >
        콘텐츠
        <PopoverBalloon
            v-if="showTooltip"
            :content="tooltipContent"
            position="top"
        />
    </div>
</template>

조건부 툴팁 ​

vue
<template>
    <div class="node-container">
        <TextInNode :text="nodeText" :max-width="100" />
        <NodeTooltip
            v-if="nodeText.length > 20"
            :data="nodeDetails"
            v-bind="tooltipProps"
        />
    </div>
</template>

의존성 ​

  • Vue 3 Composition API
  • CSS Variables for theming