ant-design/components/statistic/index.en-US.md
黑雨 cef58664e8
📝doc: add design token table (#41717)
* feat: add token

* 📝doc: update lint

* 📝doc: update doc
2023-04-11 10:25:24 +08:00

2.5 KiB

category group title cover coverDark demo
Components Data Display Statistic https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YL7PRYNtH-4AAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BPWDRbSYxJ4AAAAAAAAAAAAADrJ8AQ/original
cols
2

Display statistic number.

When To Use

  • When want to highlight some data.
  • When want to display statistic data with description.

Examples

Basic Unit Animated number In Card Countdown

API

Statistic

Property Description Type Default Version
decimalSeparator The decimal separator string .
formatter Customize value display logic (value) => ReactNode -
groupSeparator Group separator string ,
loading Loading status of Statistic boolean false 4.8.0
precision The precision of input value number -
prefix The prefix node of value ReactNode -
suffix The suffix node of value ReactNode -
title Display title ReactNode -
value Display value string | number -
valueStyle Set value section style CSSProperties -

Statistic.Countdown

Property Description Type Default Version
format Format as dayjs string HH:mm:ss
prefix The prefix node of value ReactNode -
suffix The suffix node of value ReactNode -
title Display title ReactNode -
value Set target countdown time number | dayjs -
valueStyle Set value section style CSSProperties -
onFinish Trigger when time's up () => void -
onChange Trigger when time's changing (value: number) => void - 4.16.0

Design Token