BIN-UI-DESIGN

Appearance

On this page

趋势标记 Trend ​

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

基础用法 ​

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

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

颜色反转 ​

设置属性 reverse-color 可以颠倒上升和下降的图标颜色。比如负值设置为红色，正值设置为绿色。

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

文字颜色 ​

设置属性 text-color 文字也可以显示颜色，该属性受 colorful 和 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>
<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>

自定义样式 ​

可以通过样式覆盖，设置 up 和 down 的颜色，或者覆盖文字大小

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

自定义图标 ​

可以设置图标的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>
<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 ​

参数说明类型可选值默认值
title上升下降标识Stringup 或 down-
colorful是否以彩色显示Boolean-true
reverse-color是否颜色反转Boolean-false
text-color文字是否显示颜色（受 colorful 和 reverse-color 的影响）Boolean-false

MIT Licensed | Copyright © 2023-present bin-ui-design