Demo
- 演示

NumberInfo数据文本

常用在数据卡片中，用于突出展示某个业务数据。

引用方式：

import NumberInfo from 'ant-design-pro/lib/NumberInfo';

详细使用方式请参照：独立使用 pro 组件

代码演示

演示

各种数据文案的展现方式。

import NumberInfo from 'ant-design-pro/lib/NumberInfo';
import numeral from 'numeral';

ReactDOM.render(
  <div>
    <NumberInfo
      subTitle={<span>Visits this week</span>}
      total={numeral(12321).format('0,0')}
      status="up"
      subTotal={17.1}
    />
  </div>,
  mountNode
);

API#

参数	说明	类型	默认值
title	标题	ReactNode\|string	-
subTitle	子标题	ReactNode\|string	-
total	总量	ReactNode\|string	-
subTotal	子总量	ReactNode\|string	-
status	增加状态	'up \| down'	-
theme	状态样式	string	'light'
gap	设置数字和描述之间的间距（像素）	number	8