Skip to content

MetricCard ​

MetricCard 用一张卡片展示关键指标,并补充单位、变化量和必要说明。

MetricCard 示例

基本用法 ​

markdown
<MetricCard
  label="准确率"
  value="94.7"
  unit="%"
  delta="+3.2"
  caption="相对监督基线的 5 次随机种子平均结果"
  variant="success"
/>

使用正文插槽 ​

markdown
<MetricCard label="延迟" value="18" unit="ms" delta="-12%" variant="info">
在单张 A100、批大小为 32 的条件下测量。
</MetricCard>

属性 ​

属性类型默认值说明
labelstring-指标标签
valuestring | number必填主指标值
unitstring-单位
deltastring-对比或变化说明
captionstring-指标下方说明
variantstring'primary'primary、success、warning、danger 或 info
trendstring'flat'up、down 或 flat
compactbooleanfalse使用更紧凑的间距