NumberInfo

Often used in data cards for highlighting the business data.

Usage:

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

Learning more to visit: Using Pro Components Alone

Examples

Demo

Used for presenting various numerical data.

expand codeexpand code
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#

Property Description Type Default
title title ReactNode|string -
subTitle subtitle ReactNode|string -
total total amount ReactNode|string -
subTotal total amount of additional information ReactNode|string -
status increase state 'up | down' -
theme state style string 'light'
gap set the spacing (pixels) between numbers and descriptions number 8
EllipsisResult