Statistic 통계 수치

LhStatistic는 통계 수치를 표시하며, 정밀도, 천 단위 구분 기호, 접두사와 접미사를 지원합니다.

기본 사용법

제목 + 수치

연간 방문 수

2,384,712

<script setup lang="ts">
</script>

<template>
  <LhStatistic title="연간 방문 수" :value="2384712" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="연간 방문 수" :value="2384712" />
</template>

정밀도와 구분 기호

precision은 소수 자릿수를, separator는 천 단위 구분을 제어 (빈 문자열이면 그룹화 해제)

평점

4.85

번호

8899001

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="평점" :value="4.8471" :precision="2" />
    <LhStatistic title="번호" :value="8899001" separator="" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="평점" :value="4.8471" :precision="2" />
    <LhStatistic title="번호" :value="8899001" separator="" />
  </div>
</template>

접두사와 접미사

prefix / suffix 또는 동일한 이름의 슬롯

거래액

¥128,600위안

성장률

12.6%

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="거래액" :value="128600" prefix="¥" suffix="위안" />
    <LhStatistic title="성장률" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="거래액" :value="128600" prefix="¥" suffix="위안" />
    <LhStatistic title="성장률" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

비수치 텍스트

value에 파싱할 수 없는 문자열을 전달하면 원문 그대로 표시되며, 초대형 수치나 특수 문구에 활용할 수 있습니다.

문자열 value

별들

헤아릴 수 없음

<script setup lang="ts">
</script>

<template>
  <LhStatistic title="별들" value="헤아릴 수 없음" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="별들" value="헤아릴 수 없음" />
</template>

API

Props

프로퍼티	설명	타입	기본값
title	수치 제목	string	—
value	통계 수치. 문자열 형태는 초대형 수치나 기호가 포함된 텍스트를 담을 수 있습니다	string | number	0
precision	소수 정밀도	number	0
separator	천 단위 구분 기호. 빈 문자열이면 그룹화를 끕니다	string	','
prefix	수치 접두사 (예: 통화 기호)	string	—
suffix	수치 접미사 (예: 단위)	string	—
sx	sx 빠른 레이아웃 속성	LhSxProps	—

Slots

슬롯	설명
title	커스텀 제목
prefix	커스텀 접두사
suffix	커스텀 접미사

무장애

• 수치 영역은 aria-live="polite"이며, value가 변경되면 화면 읽기 프로그램이 새 값을 부드럽게 방송합니다
• 제목, 접두사, 접미사는 모두 일반 텍스트이므로 직접 읽을 수 있습니다

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다 (packages/components/statistic/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 프로퍼티 설명은 위쪽 Props 표를 참조하세요):

LhStatisticProps

export interface LhStatisticProps {
  /** 수치 제목 (수치 위에 표시) */
  title?: string
  /** 통계 수치. 문자열 형태는 초대형 수치나 기호가 포함된 텍스트를 담을 수 있습니다 */
  value: number | string
  /** 소수 정밀도 */
  precision?: number
  /** 천 단위 구분 기호. 빈 문자열이면 그룹화를 끕니다 */
  separator?: string
  /** 수치 접두사 (예: 통화 기호) */
  prefix?: string
  /** 수치 접미사 (예: 단위) */
  suffix?: string
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}