NumberInfo数据文本

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

引用方式:

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

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

代码演示

NumberInfo 数据文本 - 图1

演示

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

  1. import NumberInfo from 'ant-design-pro/lib/NumberInfo';
  2. import numeral from 'numeral';
  3. ReactDOM.render(
  4. <div>
  5. <NumberInfo
  6. subTitle={<span>Visits this week</span>}
  7. total={numeral(12321).format('0,0')}
  8. status="up"
  9. subTotal={17.1}
  10. />
  11. </div>
  12. , mountNode);

API

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