Stat

Stat (통계)

제목과 값을 함께 표시하는 통계를 보여 주는 컴포넌트예요. 대시보드의 지표 카드처럼 숫자 정보를 강조할 때 유용해요.

출처: 문서

본문

Stat은 제목과 값을 가진 통계를 표시하는 컴포넌트예요. <ExampleTabs name="stat-basic" />

사용법 (Usage)

import { Stat } from "@chakra-ui/react"

<Stat.Root>
  <Stat.Label />
  <Stat.ValueText />
  <Stat.HelpText />
  <Stat.UpIndicator />
</Stat.Root>

예시 (Examples)

형식 옵션 (Format Options)

Stat.ValueText 안에서 FormatNumber 컴포넌트를 사용해 값을 형식화할 수 있어요.

인디케이터 (Indicator)

인디케이터와 함께 통계를 표시하는 예시예요.

정보 팁 (Info Tip)

InfoTip과 Stat.Label 컴포넌트를 조합해 정보 팁을 표시할 수 있어요.

값 단위 (Value Unit)

단위가 있는 값을 표시하는 예시예요.

진행 바 (Progress Bar)

진행 바와 함께 통계를 표시하는 예시예요.

아이콘 (Icon)

아이콘과 함께 통계를 표시하는 예시예요.

추세 (Trend)

추세 인디케이터와 함께 통계를 표시하는 예시예요.

닫힌 컴포넌트 (Closed Component)

닫힌 컴포넌트 구성을 위해 Stat을 설정하는 방법이에요.

Props

Stat 컴포넌트의 Root 파트 props에 대한 상세 정보는 공식 문서의 PropTable를 참고하세요.