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 |