指標グループStatGroupBeta
複数の Statistic をレスポンシブな指標グリッドとしてまとめて表示します。
プレビュー
請求対象者
6名
未確定 3件
請求総額
¥1,224,520
+8.2%
限度額超過者
1名
+1
提出期限
6/10
あと4日
状態とバリエーション
カード付き
バックオフィスのサマリ行では、各指標のカード面だけで区切ります。
請求対象者
6名
未確定 3件
請求総額
¥1,224,520
+8.2%
限度額超過者
1名
+1
提出期限
6/10
あと4日
カードなし
周囲がすでにカードの時は card=false にして、内側の枠線を増やしません。
請求対象者
6名
未確定 3件
請求総額
¥1,224,520
+8.2%
限度額超過者
1名
+1
提出期限
6/10
あと4日
少数指標
3件程度の指標では列数を狭めて密度を保ちます。
請求対象者
6名
未確定 3件
請求総額
¥1,224,520
+8.2%
限度額超過者
1名
+1
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | StatisticProps[] | - | 各指標です。Statistic の label/value/change/trend/tone/hint を渡します。 |
| cols | 1-8 | { base?, sm?, md?, lg?, xl? } | { base: 1, sm: 2, md: 4 } | 列数の上限です。既定では最大4列で、狭いコンテナでは1列まで折り返します。 |
| card | boolean | true | 各 Statistic のカード面を表示するかどうかです。周囲がカードの場合は false にします。 |
| className | string | - | グリッドルートに追加するクラスです。 |
使い方
import { StatGroup } from "@gunjo/ui";
const items = [
{ label: "請求対象者", value: "6名", hint: "未確定 3件" },
{ label: "請求総額", value: "¥1,224,520", change: "+8.2%", trend: "up", tone: "success" },
{ label: "限度額超過者", value: "1名", change: "+1", trend: "up", tone: "destructive" },
{ label: "提出期限", value: "6/10", change: "あと4日", trend: "down", tone: "muted" },
];
export function InvoiceSummary() {
return (
<div className="w-full max-w-4xl">
<StatGroup items={items} cols={{ base: 1, sm: 2, md: 4 }} />
</div>
);
}