Trend趋势标记

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

引用方式:

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

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

代码演示

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

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