---
url: /components/basic/FaTrend.md
---
# FaTrend 趋势标识

带箭头的趋势标识组件，用于展示数据上升/下降趋势，提供多种视觉风格。

## 使用场景

* 股票涨跌幅
* 销售数据趋势
* 网站流量变化
* 成本/费用变化
* 错误率变化
* 性能指标升降

## Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `value` | `string` | **必需** | 趋势值（百分比等） |
| `type` | `'up' \| 'down'` | `'up'` | 趋势类型 |
| `prefix` | `string` | `''` | 前缀 |
| `suffix` | `string` | `''` | 后缀 |
| `reverse` | `boolean` | `false` | 是否反转颜色含义 |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸大小 |
| `variant` | `'default' \| 'filled' \| 'soft' \| 'outline'` | `'default'` | 视觉风格 |

## 注意事项

### 颜色规则

* **上升（up）**：
  * 默认：绿色（上涨是好事）
  * `reverse` 为 `true`：红色
* **下降（down）**：
  * 默认：红色（下降是坏事）
  * `reverse` 为 `true`：绿色

1. **颜色含义**：
   * 默认：绿色=上升，红色=下降
   * `reverse` 模式：绿色=下降，红色=上升
2. **使用场景**：
   * 销售、访问量等增长指标：使用默认模式
   * 成本、错误率等下降指标：使用 `reverse` 模式
3. **箭头方向**：自动根据 `type` 显示向上/向下箭头