Trend趋势标记

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

引用方式：

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

详细使用方式请参照：独立使用 pro 组件

代码演示

颜色反转

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

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
);

演示

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

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>