NumberInfo
IMPORT MODULE

Often used in data cards for highlighting the business data.

Examples

本周访问
12,32117.1
Basic

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'chart-number-info-basic',
  template: ` <number-info subTitle="本周访问" total="12,321" subTotal="17.1" status="up"></number-info> `,
})
export class ChartNumberInfoBasicComponent {}
今日访问
12,321
本周访问
12,32100
本月访问
12,32100000
Multiple

Should be show a separator when multiple number-info components.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'chart-number-info-multiple',
  template: `
    <number-info subTitle="今日访问" total="12,321"></number-info>
    <number-info subTitle="本周访问" total="12,32100"></number-info>
    <number-info subTitle="本月访问" total="12,32100000"></number-info>
  `,
})
export class ChartNumberInfoMultipleComponent {}
本周访问
12,32117.1
主题

暗系。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'chart-number-info-theme',
  template: ` <number-info subTitle="本周访问" total="12,321" subTotal="17.1" status="down" theme="default"></number-info> `,
})
export class ChartNumberInfoThemeComponent {}

API

number-info

PropertyDescriptionTypeDefault
[title]titleTemplateRef<void>-
[subTitle]subtitleTemplateRef<void>-
[total]total amountstring, number-
[suffix]total amount suffixstring-
[subTotal]total amount of additional informationstring, number-
[status]increase state'up','down'-
[theme]state style'light','default''light'
[gap]set the spacing (pixels) between numbers and descriptionsnumber8