组件 · 展示 · 原生 HTML 与 React
统计卡 Stat
标签 · 数字（等宽数字）· 和上期比的变化 · 迷你折线。变化只有涨（成功色）跌（危险色）两种含义色。
演示
本周写入
1,284篇
↑ 12.4% 比上周新会员
86
↓ 3 比上周平均写入耗时
2.4秒
持平本周写入
1,284篇
↑ 12.4% 比上周新会员
86
↓ 3 比上周<div class="xxd-stats" style="width:100%;max-width:640px">
<div class="xxd-stat"><p class="xxd-stat__label">本周写入</p><p class="xxd-stat__value">1,284<span class="xxd-stat__unit">篇</span></p><span class="xxd-stat__delta" data-tone="up">↑ 12.4% 比上周</span><span class="xxd-stat__spark" data-spark="8,9,7,11,10,13,15"></span></div>
<div class="xxd-stat"><p class="xxd-stat__label">新会员</p><p class="xxd-stat__value">86</p><span class="xxd-stat__delta" data-tone="down">↓ 3 比上周</span><span class="xxd-stat__spark" data-spark="12,11,13,10,9,10,8"></span></div>
<div class="xxd-stat"><p class="xxd-stat__label">平均写入耗时</p><p class="xxd-stat__value">2.4<span class="xxd-stat__unit">秒</span></p><span class="xxd-stat__delta">持平</span><span class="xxd-stat__spark" data-spark="5,5,6,5,5,4,5"></span></div>
</div>export function StatDemo() {
return (
<div className="xxd-stats" style={{ width: "100%", maxWidth: 640 }}>
{[["本周写入", "1,284", "篇", "up", "↑ 12.4% 比上周", [8, 9, 7, 11, 10, 13, 15]], ["新会员", "86", "", "down", "↓ 3 比上周", [12, 11, 13, 10, 9, 10, 8]]].map(([label, value, unit, tone, delta, data]) => (
<div className="xxd-stat" key={label as string}>
<p className="xxd-stat__label">{label}</p>
<p className="xxd-stat__value">{value}{unit && <span className="xxd-stat__unit">{unit}</span>}</p>
<span className="xxd-stat__delta" data-tone={tone as string}>{delta}</span>
<span className="xxd-stat__spark" dangerouslySetInnerHTML={{ __html: sparkline(data as number[]) }} />
</div>
))}
</div>
);
}属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| 类名 | xxd-stats xxd-stat xxd-stat__label xxd-stat__value xxd-stat__unit xxd-stat__delta xxd-stat__spark |
JS
el.innerHTML = Xxd.sparkline([3, 5, 4, 8]) // 或者 data-spark="3,5,4,8" 再 Xxd.init()键盘与读屏
- 迷你折线是 aria-hidden 的装饰；变化要写成文字（↑ 12.4% 比上周），不能只靠颜色。