组件
统计 Stat
Stat:统计数值。label 低调说明含义,数值用等宽数字清晰显示,变化量用固定语义色表示方向。
#基础用法
Letters received
12,480
↑ 4.2%Against last quarter
<script setup lang="ts">
import { Stat } from "@bysages/vue";
</script>
<template>
<Stat.Root>
<Stat.Label>Letters received</Stat.Label>
<Stat.Value>12,480</Stat.Value>
<Stat.Delta direction="up">↑ 4.2%</Stat.Delta>
<Stat.Description>Against last quarter</Stat.Description>
</Stat.Root>
</template>
#属性
#StatRoot
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#StatLabel
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#StatValue
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#StatDescription
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#StatDelta
增减数值的方向由 direction prop 决定;使用方显式设置的 data-direction 属性优先。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
direction | String as PropType<"up" | "down" | "flat"> | "flat" | — |