ChuFix UI v0.2.1
Preview Updated 2026-05-10

Stat

KPI metric card with number, label, and trend. Designed for dashboard summary headers.

Basic usage

label + value is the minimum config.

背景
今日访问
12384
 
<script setup lang="ts">
import { CfStat } from '@chufix-design/vue';
</script>

<template>
  <CfStat label="今日访问" :value="12384" variant="outlined" />
</template>
<script setup>
import { CfStat } from '@chufix-design/vue';
</script>

<template>
  <CfStat label="今日访问" :value="12384" variant="outlined" />
</template>
<CfStat label="Today's visits" value={12384} variant="outlined" />
<CfStat label="Today's visits" value={12384} variant="outlined" />

Trends and prefix / suffix

trend — { delta, direction?, label? }. When direction is omitted it’s inferred from the value’s sign (positive green, negative red, zero gray). prefix / suffix add small text around the number (currency, percent sign).

背景
今日访问
12384
+12.4%环比昨日
转化率
3.2%
-0.4%环比昨日
收入
¥84520
0与昨日持平
 
<script setup lang="ts">
import { CfStat } from '@chufix-design/vue';
</script>

<template>
  <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;">
    <CfStat label="今日访问" :value="12384" :trend="{ delta: '+12.4%', label: '环比昨日' }" variant="outlined" />
    <CfStat label="转化率" value="3.2" suffix="%" :trend="{ delta: '-0.4%', label: '环比昨日' }" variant="outlined" />
    <CfStat label="收入" :value="84520" prefix="¥" :trend="{ delta: 0, label: '与昨日持平' }" variant="outlined" />
  </div>
</template>
<script setup>
import { CfStat } from '@chufix-design/vue';
</script>

<template>
  <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;">
    <CfStat label="今日访问" :value="12384" :trend="{ delta: '+12.4%', label: '环比昨日' }" variant="outlined" />
    <CfStat label="转化率" value="3.2" suffix="%" :trend="{ delta: '-0.4%', label: '环比昨日' }" variant="outlined" />
    <CfStat label="收入" :value="84520" prefix="¥" :trend="{ delta: 0, label: '与昨日持平' }" variant="outlined" />
  </div>
</template>
<CfStat label="Today's visits" value={12384} trend={{ delta: '+12.4%', label: 'vs. yesterday' }} variant="outlined" />
<CfStat label="Conversion" value="3.2" suffix="%" trend={{ delta: '-0.4%', label: 'vs. yesterday' }} variant="outlined" />
<CfStat label="Revenue" value={84520} prefix="¥" trend={{ delta: 0, label: 'flat vs. yesterday' }} variant="outlined" />
<CfStat label="Today's visits" value={12384} trend={{ delta: '+12.4%', label: 'vs. yesterday' }} variant="outlined" />
<CfStat label="Conversion" value="3.2" suffix="%" trend={{ delta: '-0.4%', label: 'vs. yesterday' }} variant="outlined" />
<CfStat label="Revenue" value={84520} prefix="¥" trend={{ delta: 0, label: 'flat vs. yesterday' }} variant="outlined" />

Variants

variant controls background and border: default (transparent) / outlined (border) / soft (light gray fill).

背景
default
42
无边框，透明背景
outlined
42
带描边，常用做卡片
soft
42
灰色软背景
 
<script setup lang="ts">
import { CfStat } from '@chufix-design/vue';
</script>

<template>
  <div style="display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
    <CfStat label="default" :value="42" hint="无边框，透明背景" />
    <CfStat label="outlined" :value="42" hint="带描边，常用做卡片" variant="outlined" />
    <CfStat label="soft" :value="42" hint="灰色软背景" variant="soft" />
  </div>
</template>
<script setup>
import { CfStat } from '@chufix-design/vue';
</script>

<template>
  <div style="display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
    <CfStat label="default" :value="42" hint="无边框，透明背景" />
    <CfStat label="outlined" :value="42" hint="带描边，常用做卡片" variant="outlined" />
    <CfStat label="soft" :value="42" hint="灰色软背景" variant="soft" />
  </div>
</template>
<CfStat label="default" value={42} />
<CfStat label="outlined" value={42} variant="outlined" />
<CfStat label="soft" value={42} variant="soft" />
<CfStat label="default" value={42} />
<CfStat label="outlined" value={42} variant="outlined" />
<CfStat label="soft" value={42} variant="soft" />

Sizes

size changes the main number’s font size — sm compact / md default / lg for landing-page emphasis.

背景
size = sm
42
size = md
42
size = lg
42
 
<script setup lang="ts">
import { CfStat } from '@chufix-design/vue';
</script>

<template>
  <div style="display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
    <CfStat label="size = sm" :value="42" size="sm" variant="outlined" />
    <CfStat label="size = md" :value="42" size="md" variant="outlined" />
    <CfStat label="size = lg" :value="42" size="lg" variant="outlined" />
  </div>
</template>
<script setup>
import { CfStat } from '@chufix-design/vue';
</script>

<template>
  <div style="display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
    <CfStat label="size = sm" :value="42" size="sm" variant="outlined" />
    <CfStat label="size = md" :value="42" size="md" variant="outlined" />
    <CfStat label="size = lg" :value="42" size="lg" variant="outlined" />
  </div>
</template>
<CfStat label="size = sm" value={42} size="sm" variant="outlined" />
<CfStat label="size = md" value={42} size="md" variant="outlined" />
<CfStat label="size = lg" value={42} size="lg" variant="outlined" />
<CfStat label="size = sm" value={42} size="sm" variant="outlined" />
<CfStat label="size = md" value={42} size="md" variant="outlined" />
<CfStat label="size = lg" value={42} size="lg" variant="outlined" />

Loading

When loading, the number slot shows — so 0 doesn’t flash before data arrives.

背景
数据加载中
0
正常状态
123
 
<script setup lang="ts">
import { CfStat } from '@chufix-design/vue';
</script>

<template>
  <div style="display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
    <CfStat label="数据加载中" :value="0" loading variant="outlined" />
    <CfStat label="正常状态" :value="123" variant="outlined" />
  </div>
</template>
<script setup>
import { CfStat } from '@chufix-design/vue';
</script>

<template>
  <div style="display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
    <CfStat label="数据加载中" :value="0" loading variant="outlined" />
    <CfStat label="正常状态" :value="123" variant="outlined" />
  </div>
</template>
<CfStat label="Loading" value={0} loading variant="outlined" />
<CfStat label="Ready" value={123} variant="outlined" />
<CfStat label="Loading" value={0} loading variant="outlined" />
<CfStat label="Ready" value={123} variant="outlined" />

API

PropTypeDefaultDescription
labelstring | ReactNode—Small label above the number
valuestring | number | ReactNode—Main number
prefix / suffixstring | ReactNode—Small text before/after the number
hintstring | ReactNode—Helper text below
trendStatTrend—{ delta, direction?, label? }; direction inferred from sign when omitted
variant'default' | 'outlined' | 'soft''default'Visual mode
size'sm' | 'md' | 'lg''md'Number font size
loadingbooleanfalseLoading state, number slot shows —

Slots (Vue) / props (React): leading / trailing (label row ends), footer (appended at the bottom).

反馈与讨论

Stat · Discussion

0
0 / 600
一键发送
正在加载评论...