Stat List

Stat List перечисляет вспомогательные показатели. rows — подпись приглушённым кеглем --stat-list-label-fs слева, значение полужирным справа, линия между строками (CR · 2.66%, CPA · $2.76). columns — ячейки в ряд с вертикальными линиями: подпись капсом, крупное значение, заметка под ним (SPEND · 7D / $12 408). Значения — готовый текст.

Статус: experimental · в системе с 2026-09 · интерактивность: none (нет)

Когда использовать

Под Kpi в левой колонке развёрнутого виджета.
Ряд из трёх показателей в подвале компактного виджета.

Не использовать:

Показатели с цветом серии — Legend.
Больше пяти строк — Table.

Альтернативы:

legend — показатели с точкой цвета серии
kpi — одно главное число

Строки и ячейки

rows с четырьмя показателями и columns с тремя.

Расход · 7 дн: $12 408
Средний CTR: 2.41%
Доля активных: 50%
Средний CPA: $2.76

Расход · 7 дн: $12 408
Средний CTR: 2.41%
Доля активных: 50%; 6 of 12

<!--
  🟢

  Строки показателей левой колонки виджета и ячейки в ряд из подвала
  компактного виджета.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import StatList from "$lib/ui/StatList.svelte";

const rows = [
	{ label: t("Spend · 7d"), value: "$12 408" },
	{ label: t("Avg CTR"), value: "2.41%" },
	{ label: t("Active rate"), value: "50%" },
	{ label: t("Avg CPA"), value: "$2.76" },
];
const columns = [
	{ label: t("Spend · 7d"), value: "$12 408" },
	{ label: t("Avg CTR"), value: "2.41%" },
	{ label: t("Active rate"), value: "50%", note: "6 of 12" },
];
</script>

<div style="display: flex; flex-direction: column; gap: var(--sp-4); width: 360px;">
	<StatList items={rows} />
	<StatList items={columns} layout="columns" />
</div>