# TrendArrow 

### Intro

A percentage number with an arrow indicating the trend of the indicator

### Install

```javascript
// React
import { TrendArrow } from '@nutui/nutui-react-native';

```

## Demo

### Basic Usage

:::demo

```SnackPlayer name=TrendArrow&dependencies=@nutui/nutui-react-native
import  React from "react"
import { TrendArrow, Cell } from '@nutui/nutui-react-native'

const App = () => {
  return (
    <Cell>
        <TrendArrow syncTextColor={false} rate={1} />
        <TrendArrow syncTextColor={false} rate={-0.2535} />
    </Cell>
  );
};
export default App;
```

:::

### Change text color

:::demo

```SnackPlayer name=TrendArrow&dependencies=@nutui/nutui-react-native
import  React from "react"
import { TrendArrow, Cell } from '@nutui/nutui-react-native'

const App = () => {
  return (
    <Cell>
        <TrendArrow rate={10.2365} />
        <TrendArrow rate={-0.2535} />
    </Cell>
  );
};
export default App;
```

:::

### Specify decimal places

:::demo

```SnackPlayer name=TrendArrow&dependencies=@nutui/nutui-react-native
import  React from "react"
import { TrendArrow, Cell } from '@nutui/nutui-react-native'

const App = () => {
  return (
     <Cell>
        <TrendArrow digits={1} rate={10.2365} />
        <TrendArrow digits={3} rate={-0.2535} />
    </Cell>
  );
};
export default App;
```

:::

### Arrow ahead

:::demo

```SnackPlayer name=TrendArrow&dependencies=@nutui/nutui-react-native
import  React from "react"
import { TrendArrow, Cell } from '@nutui/nutui-react-native'

const App = () => {
  return (
    <Cell>
        <TrendArrow arrowLeft rate={0.2535} />
        <TrendArrow arrowLeft rate={-0.2535} />
    </Cell>
  );
};
export default App;
```

:::

### Show sign

:::demo

```SnackPlayer name=TrendArrow&dependencies=@nutui/nutui-react-native
import  React from "react"
import { TrendArrow, Cell } from '@nutui/nutui-react-native'

const App = () => {
  return (
    <Cell>
        <TrendArrow showSign rate={1} />
        <TrendArrow showSign rate={-0.2535} />
    </Cell>
  );
};
export default App;
```

:::

### Whether to show 0

:::demo

```SnackPlayer name=TrendArrow&dependencies=@nutui/nutui-react-native
import  React from "react"
import { TrendArrow, Cell } from '@nutui/nutui-react-native'

const App = () => {
  return (
    <Cell>
        <TrendArrow showSign rate={0} />
        <TrendArrow showSign showZero rate={0} />
    </Cell>
  );
};
export default App;
```

:::

### Custom color

:::demo

```SnackPlayer name=TrendArrow&dependencies=@nutui/nutui-react-native
import  React from "react"
import { TrendArrow, Cell } from '@nutui/nutui-react-native'

const App = () => {
  return (
    <Cell>
        <TrendArrow rate={10.2365} riseColor="rgb(73,143,242)" />
        <TrendArrow rate={-0.2535} showSign dropColor="rgb(255, 190, 13)" />
        <TrendArrow
        syncTextColor={false}
        rate={-0.2535}
        showSign
        textColor="rgb(39,197,48)"
        dropColor="rgb(39,197,48)"
        />
    </Cell>
  );
};
export default App;
```

:::

### Custom icon

:::demo

```SnackPlayer name=TrendArrow&dependencies=@nutui/nutui-react-native
import  React from "react"
import { TrendArrow, Cell, Icon } from '@nutui/nutui-react-native'

const App = () => {
  return (
    <Cell>
        <TrendArrow rate={10.2365} upIconName="success" />
        <TrendArrow rate={-10.2365} downIconName="failure" />
        <TrendArrow rate={10.2365}>
        <Icon name="heart-fill" color="#fa2c19" size={12} />
        </TrendArrow>
    </Cell>
  );
};
export default App;
```

:::


## API

### Props

| Attribute         | Description                             | Type   | Default           |
|--------------|----------------------------------|--------|------------------|
| rate         | Value, the arrow is up when it is greater than 0, and the arrow is down when it is less than 0    | Number | -                |
| digits         | decimal precision               | Number | 2               |
| showSign         | Whether to display plus and minus signs               | Boolean | false               |
| showZero         |whether to show 0               | Boolean | false               |
| arrowLeft        | whether to show an arrow to the left of the number     | Boolean | false               |
| syncTextColor   | Whether the text color is in sync with the arrow               | Boolean | true   |
| textColor        | text color               | String | '#333333'               |
| riseColor         | up arrow color               | String | '#fa2c19'               |
| dropColor         | down arrow color               | String | ‘#64b578’               |
| iconSize         | arrow size               | String | '12px'               |
| upIconName         | custom up arrow icon               | String | 'triangle-up'               |
| downIconName           | custom down arrow icon               | String | 'triangle-down'               |


## Theming

### CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).

| Name | Default Value |
| --- | --- |
| --nutui-trendarrow-font-size | ` 14` |
| --nutui-trendarrow-before-icon-margin | `  4` |
| --nutui-trendarrow-font-size | ` 14` |
| --nutui-trendarrow-before-icon-margin | `  4` |
