统计数值 Statistic - Ant Design

何时使用

当需要突出某个或某组数字时。
当需要展示带描述的统计类数据时使用。

代码演示

API

通用属性参考：通用属性

Statistic

参数	说明	类型	默认值	版本
classNames	用于自定义 Statistic 组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props }) => Record<SemanticDOM, string>	-
decimalSeparator	设置小数点	string	`.`
formatter	自定义数值展示	(value) => ReactNode	-
groupSeparator	设置千分位标识符	string	`,`
loading	数值是否加载中	boolean	false	4.8.0
precision	数值精度	number	-
prefix	设置数值的前缀	ReactNode	-
styles	用于自定义 Statistic 组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM , CSSProperties> \| (info: { props }) => Record<SemanticDOM , CSSProperties>	-
suffix	设置数值的后缀	ReactNode	-
title	数值的标题	ReactNode	-
value	数值内容	string \| number	-
~~valueStyle~~	设置数值区域的样式，请使用 `styles.content` 替代	CSSProperties	-

Statistic.Countdown Deprecated

参数	说明	类型	默认值	版本
format	格式化倒计时展示，参考 dayjs	string	`HH:mm:ss`
prefix	设置数值的前缀	ReactNode	-
suffix	设置数值的后缀	ReactNode	-
title	数值的标题	ReactNode	-
value	数值内容	number	-
valueStyle	设置数值区域的样式	CSSProperties	-
onFinish	倒计时完成时触发	() => void	-
onChange	倒计时时间变化时触发	(value: number) => void	-

Statistic.Timer 5.25.0+

参数	说明	类型	默认值	版本
type	计时类型，倒计时或者正计时	`countdown` \| `countup`	-
format	格式化倒计时展示，参考 dayjs	string	`HH:mm:ss`
prefix	设置数值的前缀	ReactNode	-
suffix	设置数值的后缀	ReactNode	-
title	数值的标题	ReactNode	-
value	`countdown` 模式下为目标时间，`countup` 模式下为起始时间（毫秒时间戳）	number	-
valueStyle	设置数值区域的样式	CSSProperties	-
onFinish	倒计时完成时触发，指定为 `countup` 时此属性不生效	() => void	-
onChange	倒计时时间变化时触发	(value: number) => void	-

Semantic DOM

Statistic 提供 root、header、title、content、value、prefix 和 suffix 语义化 DOM 节点。

Active

11.28%

root
6.0.0
根元素，包含统计数值组件的重置样式和整体容器样式
header
6.0.0
头部元素，包含下内边距和标题区域的布局样式
title
6.0.0
标题元素，包含文字颜色、字体大小等标题文字的显示样式
prefix
6.0.0
前缀元素，包含行内块显示、右外边距等前缀内容的布局样式
content
6.0.0
内容元素，包含前缀、数值、后缀的布局和对齐等内容区域样式
value
6.4.0
数值元素，包含文字颜色、字体大小、字体族等统计数值的展示样式
suffix
6.0.0
后缀元素，包含行内块显示、左外边距等后缀内容的布局样式

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
contentFontSize	内容字体大小	string \| number	24
titleFontSize	标题字体大小	number	14

全局 Token如何定制？

Token 名称	描述	类型	默认值
colorText	最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。	string	rgba(0,0,0,0.88)
colorTextDescription	控制文本描述字体颜色。	string	rgba(0,0,0,0.45)
colorTextHeading	控制标题字体颜色。	string	rgba(0,0,0,0.88)
fontFamily	Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。	number	14
lineHeight	文本行高	number	1.5714285714285714
marginXXS	控制元素外边距，最小尺寸。	number	4
padding	控制元素的内间距。	number	16