uxcore-number-info

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

Usage no npm install needed!

<script type="module">
  import uxcoreNumberInfo from 'https://cdn.skypack.dev/uxcore-number-info';
</script>

README

uxcore-number-info

React footer toolbar

NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

Development

git clone https://github.com/uxcore/uxcore-number-info
cd uxcore-number-info
npm install
npm run server

if you'd like to save your install time，you can use uxcore-tools globally.

npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-number-info
cd uxcore-number-info
npm install
npm run dep
npm run start

Test Case

npm run test

Coverage

npm run coverage

Demo

http://uxcore.github.io/components/number-info

Contribute

Yes please! See the CONTRIBUTING for details.

API

Props

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

参数 说明 类型 默认值
title 标题 ReactNode or string -
subTitle 子标题 ReactNode or string -
total 总量 ReactNode or string -
subTotal 子总量 ReactNode or string -
status 增加状态 up or down or 具体文字 -
textAlign 对齐方式 string ' left'
gap 设置数字和描述直接的间距（像素） number 8

对于数据文本组件，我们还可以进一步抽离，把 Trend 单独拿出来使用。

参数 说明 类型 默认值
status 增加状态 up or down or 具体文字 - 
const Trend = NumberInfo.Trend;
<Trend status="up">+17.1%</Trend>