This article has not been translated, hope that your can PR to translated it. Help us!

趋势标记
IMPORT MODULE

趋势符号,标记上升和下降趋势。通常用绿色代表“好”,红色代表“不好”,股票涨跌场景除外。

代码演示

12%11%
演示

在数值背后添加一个小图标来标识涨跌情况。

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

import { TrendModule } from '@yelon/chart/trend';

@Component({
  selector: 'chart-trend-basic',
  template: `
    <trend flag="up">12%</trend>
    <trend flag="down" class="ml-sm">11%</trend>
  `,
  standalone: true,
  imports: [TrendModule]
})
export class ChartTrendBasicComponent {}
12%11%
颜色反转

在数值背后添加一个小图标来标识涨跌情况。

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

import { TrendModule } from '@yelon/chart/trend';

@Component({
  selector: 'chart-trend-reverse',
  template: `
    <trend flag="up" reverseColor>12%</trend>
    <trend flag="down" reverseColor class="ml-sm">11%</trend>
  `,
  standalone: true,
  imports: [TrendModule]
})
export class ChartTrendReverseComponent {}

API

trend

成员说明类型默认值
[colorful]是否彩色标记booleantrue
[flag]上升下降标识'up','down'-
[reverseColor]颜色反转booleanfalse
Loading...