Trend

Trend symbol, marking upward and downward trends. Typically, green represents “good” and red represents “bad”, except in stock market scenarios.

Basic Usage

Add a small icon behind the value to indicate the trend direction.

22.5%

-11.4%

<template>
  <div flex>
    <div style="width: 224px; margin-right: 20px">
      <b-trend flag="up">22.5%</b-trend>
    </div>
    <div style="width: 224px; margin-right: 20px">
      <b-trend flag="down">-11.4%</b-trend>
    </div>
  </div>
</template>

Color Reversal

Set reverse-color to reverse the icon colors for upward and downward trends. For example, negative values become red, and positive values become green.

22.5%

-11.4%

<template>
  <div flex>
    <div style="width: 224px; margin-right: 20px">
      <b-trend flag="up" reverse-color>22.5%</b-trend>
    </div>
    <div style="width: 224px; margin-right: 20px">
      <b-trend flag="down" reverse-color>-11.4%</b-trend>
    </div>
  </div>
</template>

Textcolor

Set text-color to make the text display in color. This property is affected by colorful and reverse-color.

22.5%

-11.4%

<template>
  <div flex>
    <div style="width: 224px; margin-right: 20px">
      <b-trend flag="up" reverse-color text-color>22.5%</b-trend>
    </div>
    <div style="width: 224px; margin-right: 20px">
      <b-trend flag="down" reverse-color text-color>-11.4%</b-trend>
    </div>
  </div>
</template>

Custom Styles

Can be overridden via styles, setting the colors for up and down, or overriding the text size.

22.5%

-11.4%

<template>
  <div flex style="--bin-color-success: #2db7f5; --bin-color-danger: #ff9900; font-size: 18px">
    <div style="width: 224px; margin-right: 20px">
      <b-trend flag="up" reverse-color text-color icon-size="18">22.5%</b-trend>
    </div>
    <div style="width: 224px; margin-right: 20px">
      <b-trend flag="down" reverse-color text-color icon-size="18">-11.4%</b-trend>
    </div>
  </div>
</template>

Customicon

Can set custom icon.

22.5%

-11.4%

<template>
  <div flex>
    <div style="width: 224px; margin-right: 20px">
      <b-trend flag="up" reverse-color text-color up-icon="rise" down-icon="fall">22.5%</b-trend>
    </div>
    <div style="width: 224px; margin-right: 20px">
      <b-trend flag="down" reverse-color text-color up-icon="rise" down-icon="fall">-11.4%</b-trend>
    </div>
  </div>
</template>

Props

Parameter	Description	Type	Options	Default
title	Upward or downward indicator	String	up or down	-
colorful	Whether to display in color	Boolean	-	true
reverse-color	Whether to reverse color	Boolean	-	false
text-color	Whether text shows color (affected by colorful and reverse-color)	Boolean	-	false