• 演示
• 颜色反转

Trend趋势标记

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

引用方式：

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

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

代码演示

演示

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

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

颜色反转

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

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

API

<Trend flag="up">50%</Trend>