状態とフィードバック / 意味を伴う数字
Stat
問いに答える数字に、ラベルと解釈に必要な条件を添えます。
基本的な使い方
844SQL文解析対象のSQL文
978検出結果到達できた検出結果の下限
HTML
<div class="stats">
<div class="stat"><b class="stat-fig">844</b><span class="stat-label">SQL文</span><span class="stat-note">解析対象のSQL文</span></div>
<div class="stat tone-warn"><b class="stat-fig is-bound">978</b><span class="stat-label">検出結果</span><span class="stat-note">到達できた検出結果の下限</span></div>
</div>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.stats / .stat | 数字のまとまりと個々の統計値。 |
.stat-fig / .stat-label / .stat-note | 値、その指標、注記。 |
.is-bound | 値の前に≥を付け、下限を示します。 |
.stat-delta / .stat-up / .stat-down | 前の結果からの変化。その方向が望ましいかを説明します。 |
使い方の注意
数字は折り返しません。読めないほど小さくせず、必要な幅を確保します。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。