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

Trend趋势标记

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

Usage:

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

Learning more to visit: Using Pro Components Alone

Examples

颜色反转

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

expand codeexpand code
import Trend from 'ant-design-pro/lib/Trend';

ReactDOM.render(
  <div>
    <Trend flag="up" reverseColor={true}>
      12%
    </Trend>
    <Trend flag="down" reverseColor={true} style={{ marginLeft: 8 }}>
      11%
    </Trend>
  </div>,
  mountNode
);
演示

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

expand codeexpand code
import Trend from 'ant-design-pro/lib/Trend';

ReactDOM.render(
  <div>
    <Trend flag="up">12%</Trend>
    <Trend flag="down" style={{ marginLeft: 8 }}>
      11%
    </Trend>
  </div>,
  mountNode
);

API#

<Trend flag="up">50%</Trend>
参数 说明 类型 默认值
colorful 是否彩色标记 Boolean true
flag 上升下降标识：up|down string -
reverseColor 颜色反转 Boolean false
TagSelectLogin