핵심 수치와 지표를 강조하여 표시하는 통계 컴포넌트입니다. 대시보드·요약 카드·KPI 영역에 사용합니다.
title · value · description으로 지표를 구성합니다.
prefix · suffix로 통화·단위를 표시합니다.
trend로 증감 방향을 아이콘과 함께 표시합니다.
size로 수치 스케일을 조절합니다.
stat_horizontal · stat_inline · stat_row로 배치를 변경합니다.
stat_icon · stat_icon-wrap으로 지표에 시각적 단서를 추가합니다.
card · shadow · stat_borderless · stat_accent로 외형을 조절합니다.
stat_group으로 여러 지표를 그리드로 배치합니다.
card 본문 안에 stat_group을 배치하는 대시보드 패턴입니다.
2024년 6월
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | string | — | 지표 라벨 (stat_label) |
value | string | number | — | 주요 수치 (stat_value) |
prefix | string | number | — | 값 앞 접두 (stat_prefix) |
suffix | string | number | — | 값 뒤 접미 (stat_suffix) |
description | string | — | 보조 설명 (stat_desc) |
trend | string | — | 증감 텍스트 (stat_trend) |
trend-color | string | — | trend·description 색상 color_* |
size | 'sm' | 'md' | 'lg' | md | stat_sm · stat_lg |
card | boolean | false | 카드형 배경 (stat_card) |
shadow | boolean | false | 그림자 (stat_shadow) |
| 슬롯 | 설명 |
|---|---|
value | 수치 커스텀 (value prop 대체) |
trend-icon | 증감 아이콘 |
default | 추가 콘텐츠 |
Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
stat | 지표 루트 |
stat_sm · stat_lg | 크기 변형 |
stat_card · stat_shadow | 카드·그림자 |
stat_header · stat_label · stat_value-row | 레이아웃 파트 |
stat_value · stat_prefix · stat_suffix · stat_desc · stat_trend | 값·설명 파트 |
stat_group · stat_group-2 · stat_group-3 · stat_group-4 | 지표 그리드 |
stat_horizontal | 아이콘+값 가로 배치 |
| 토큰 | 기본값 | 설명 |
|---|---|---|
--stat-value-size · --stat-value-size-sm · --stat-value-size-lg | 1.75rem · 1.25rem · 2.25rem | 수치 크기 |
--stat-label-size · --stat-desc-size | var(--text-size-sm) | 라벨·설명 크기 |
--stat-group-gap · --stat-card-padding | var(--space-lg) · var(--space-lg) | 그룹 간격·카드 패딩 |