Stat

数値データを目立たせて表示する統計情報コンポーネント。KPI、売上高、ユーザー数などのダッシュボード指標に使用します。

Basic

jui-stat の最も基本的な使用例です。

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
Flexbox	ラベルと数値、トレンド情報のレイアウト配置	29+	22+	9+	Baseline 2017
CSS 変数 (`var()`)	デザイントークンおよびアイコンサイズ適用	49+	31+	9.1+	Baseline 2017

💡 いずれの機能も主要ブラウザで広く対応済みです。

機能	Baseline 達成	Widely Available 予定
Flexbox	2017年	2020年前半 ✅
CSS 変数	2017年	2020年前半 ✅

WAI-ARIA:
- カード全体は role="group"（アクセシブルネームは label）として構造化され、ラベルと数値をまとめた一つのかたまり（グループ）であることが支援技術に伝わります。
- トレンド（矢印等）を示すグラフィックスには aria-hidden="true" が付与されており、スクリーンリーダーの不要な読み上げを抑制します。代わりに、trend-value を通して具体的なテキスト情報を添えて伝えます。
キーボードナビゲーション:
- 情報提示のみを行うコンポーネントであるため、フォーカス移動やキーボード操作の対象外（静的要素）となります。

プロパティ名	説明	既定値
`--jui-stat-icon-size`	統計ラベル横のアイコン（SVG）の幅および高さ	`16px`

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`helpText`	`help-text`	補助テキスト	`string`	`''`
`icon`	`icon`	アイコンSVG（innerHTML）	`string`	`''`
`label`	`label`	統計ラベル	`string`	`''`
`suffix`	`suffix`	値のサフィックス（“件”等）	`string`	`''`
`trend`	`trend`	トレンド方向	`"down" \| "neutral" \| "up"`	`'neutral'`
`trendValue`	`trend-value`	トレンド値（“+12.5%“等）	`string`	`''`
`value`	`value`	メイン値（“1,234” 等の文字列）	`string`	`''`
`valuePrefix`	`value-prefix`	値のプレフィックス（”¥“等）	`string`	`''`

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
`"icon"`	カスタムアイコン
`"value"`	メイン値（value Prop より優先）

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Built with StencilJS